微信小程序--搜索關鍵詞高亮
阿新 • • 發佈:2018-10-17
tap use 程序開發 rap 正式 height ... 開發者 userinfo
代碼地址如下:
http://www.demodashi.com/demo/14249.html
一、前期準備工作
軟件環境:微信開發者工具
官方下載地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
- 實現搜索關鍵詞高亮
2、案例目錄結構
二、程序實現具體步驟
1.index.wxml代碼
<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname"> {{userInfo.nickName}}\n 點擊頭像開始搜索 </text> </view> </view>
2.index.wxss代碼
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: red;
text-align: center;
}
.usermotto {
margin-top: 200px;
}
3.search.wxml代碼
<!--search.wxml--> <view> <view>您輸入的關鍵詞:{{inputs}}</view> <view class="input-wrap"> <input bindinput="bindSearchInput" placeholder="點擊此處開始輸入...." value="極客小寨" class="search-input" auto-focus/> <button bindtap="bindSearchTap" class="search-button">搜索</button> </view> <view class="search-result-list"> <block wx:for="{{result}}" wx:for-index="idx" wx:for-item="key_item" wx:key=""> <view data-idx="{{idx}}" class="list-item"> <block wx:for="{{key_item}}" wx:for-item="key_obj" wx:key=""> <text wx:if="{{key_obj.key == true}}" style="color:red;">{{key_obj.str}}</text> <text wx:else>{{key_obj.str}}</text> </block> </view> </block> </view> </view>
4.彈框index.js邏輯代碼
a.部分的功能實現
search_databse: function () {
let hilight_word = function (key, word) {
let idx = word.indexOf(key);
let t = [];
if (idx > -1) {
if (idx == 0) {
t = hilight_word(key, word.substr(key.length));
t.unshift({key:true,str:key});
return t;
}
if (idx > 0) {
t = hilight_word(key, word.substr(idx));
t.unshift({key:false,str:word.substring(0, idx)});
return t;
}
}
return [{key:false,str:word}];
};
let database= [
‘極客小寨小程序開發_百度百科‘,
‘極客小寨微信小程序正式上線‘,
‘極客小寨微信小程序有哪些?關註極客小寨微信公眾號獲取微信小程序最全匯總?‘,
‘公眾號出售-公眾號價格-公眾號買賣-A5公眾號交易平臺‘,
‘如何運營出一個有吸引力的微信公眾號? - 微信公眾平臺號 - 知乎‘
];
let searched = [];
let inputs = this.data.inputs;
for (let i = 0; i < database.length; i++) {
var current_word = database[i];
if (current_word.indexOf(inputs) > -1) {
searched.push(hilight_word(inputs, current_word))
}
}
// console.log(searched);
this.data.result=searched;
console.log(‘this data‘,this.data);
this.setData(this.data);
},
三、案例運行效果圖
四、總結與備註
暫無微信小程序--搜索關鍵詞高亮
代碼地址如下:
http://www.demodashi.com/demo/14249.html
註:本文著作權歸作者,由demo大師代發,拒絕轉載,轉載需要作者授權
微信小程序--搜索關鍵詞高亮