您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“微信小程序搜索關(guān)鍵詞高亮怎么實(shí)現(xiàn)”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
項(xiàng)目中碰到一個(gè)需求,微信小程序搜索數(shù)據(jù)并且關(guān)鍵詞要高亮顯示,接到需求,馬上開干。先上效果圖。
博主第一時(shí)間想到的就是使用split,根據(jù)搜索的關(guān)鍵詞,處理后臺(tái)返回的數(shù)據(jù),然后indexOf找到關(guān)鍵字,給每個(gè)字添加deep字段,deep為true,則高亮,為false,則正常。由于是小程序,所以樓主直接做成了一個(gè)高亮組件,代碼很簡單,實(shí)現(xiàn)步驟如下。
模擬數(shù)據(jù)如下
list:[ '武漢大學(xué)', '華中科技大學(xué)', '華中師范大學(xué)', '中南財(cái)經(jīng)政法大學(xué)', '中國地質(zhì)大學(xué)', '武漢理工大學(xué)', '華中農(nóng)業(yè)大學(xué)', '武漢科技大學(xué)', ],
在data中定義了一個(gè)空數(shù)組,用于存放根據(jù)搜索key過濾后的數(shù)據(jù)
filterList:[],//過濾后的
搜索的wxml和方法
// wxml <view class="search_box"> <input type="text" placeholder="請輸入武漢的985/211大學(xué)" bindinput="searchValue" class="search"/> </view> // 搜索方法 searchValue(e){ let val = e.detail.value; this.setData({ value:val }) if(val.length > 0){ this.setData({ filterList:[] }) let arr = []; for(let i = 0;i < this.data.list.length;i++){ if(this.data.list[i].indexOf(val) > -1){ arr.push(this.data.list[i]) } } this.setData({ filterList: arr }) }else{ this.setData({ filterList: [] }) } }
定義了一個(gè)高亮組件highlight
"usingComponents": { "highlight":"../../components/highlight/highlight" }
在頁面中將搜索出來的每一項(xiàng)item和key參數(shù)傳遞給組件
<view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn"> <highlight text="{{ item }}" key="{{ value }}" /> </view>
在組件中接收
properties: { text:String, key:{ type:String, value:'', observer:'_changeText' } }
組件的初始數(shù)據(jù)
data: { highlightList:[],//處理后的數(shù)據(jù) }
組件的wxml
<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>
組件的高亮數(shù)據(jù)處理
// 非空過濾 _changeText(e){ if(e.length > 0 && this.properties.text.indexOf(e) > -1){ this._filterHighlight(this.properties.text, e); } }, /** * 關(guān)鍵字高亮處理 * @param { String } text - 文本 * @param { String } key - 關(guān)鍵字 */ _filterHighlight(text, key){ let textList = text.split(""); let keyList = key.split(""); let list = []; for(let i = 0;i < textList.length;i++){ let obj = { deep:false, val:textList[i] } list.push(obj); }; for(let k = 0;k < keyList.length;k++){ list.forEach(item => { if(item.val === keyList[k]){ item.deep = true; } }) } this.setData({ highlightList:list }) }
“微信小程序搜索關(guān)鍵詞高亮怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。