1，前言
專案中碰到一個需求，搜尋資料並且關鍵詞要高亮顯示，接到需求，馬上開幹。先上效果圖。原始碼已經做成了小程式程式碼片段，放入了GitHub了，文章底部有原始碼連結。
2，思路
博主第一時間想到的就是使用split，根據搜尋的關鍵詞，處理後臺返回的資料，然後indexOf找到關鍵字，給每個字新增deep欄位，deep為true，則高亮，為false，則正常。由於是小程式，所以樓主直接做成了一個高亮元件，程式碼很簡單，實現步驟如下。
3，程式碼邏輯
模擬資料如下
list:[
'武漢大學',
'華中科技大學',
'華中師範大學',
'中南財經政法大學',
'中國地質大學',
'武漢理工大學',
'華中農業大學',
'武漢科技大學',
],
在data中定義了一個空陣列，用於存放根據搜尋key過濾後的資料
filterList:[],//過濾後的
搜尋的wxml和方法
// wxml
<view class="search_box">
<input type="text" placeholder="請輸入武漢的985/211大學" 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: [] })
}
}
定義了一個高亮元件highlight
"usingComponents": {
"highlight":"../../components/highlight/highlight"
}
在頁面中將搜尋出來的每一項item和key引數傳遞給元件
<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'
}
}
元件的初始資料
data: {
highlightList:[],//處理後的資料
}
元件的wxml
<text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text>
元件的高亮資料處理
// 非空過濾
_changeText(e){
if(e.length > 0 && this.properties.text.indexOf(e) > -1){
this._filterHighlight(this.properties.text, e);
}
},
/**
* 關鍵字高亮處理
* @param { String } text - 文字
* @param { String } key - 關鍵字
*/
_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 })
}
原始碼GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁