???最近公司在做一個內(nèi)部的管理系統(tǒng)绿贞，是基于微信小程序的渐裂，我看了一下和Vue比較類似，布局方面有HTML和CSS基礎(chǔ)的人都可以做怕敬，還是比較容易上手的，現(xiàn)在先記錄一下搜索框保留搜索歷史的功能的實(shí)現(xiàn)帘皿。
wxml部分
???直接看代碼
<view class="nav_search">
<view class="input_panel">
<icon class="icon-search"></icon>
<ns-input focus='{{autoFocus}}' bindinput="inputText" bindblur="hideHistory" bind:focus="showHistory" placeholder="請輸入產(chǎn)品名稱/產(chǎn)品ID/資源ID" ></ns-input>
</view>
<navigator class="search" bindtap="doSearch" open-type="navigateBack" hover-class='none'>搜索</navigator>
<navigator class="cancle" open-type="navigateBack" hover-class='none'>取消</navigator>
</view>
說明一下ns-input是我們自己封裝并且引入的一個組件东跪，能實(shí)現(xiàn)某些特定的效果，各位可以用input代替鹰溜。
json文件中引入組件方式
{
"component": true,
"usingComponents": {
"組件1": "組件1路徑",
"組件2": "組件2路徑",
"組件3": "組件3路徑"
}
}
引入之后就可以在wxml中使用自己定制的組件了
wxss部分
.nav_search{
width: 100vw;
padding: 10px 15px;
height: 56px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 2;
}
.nav_search .input_panel {
display: flex;
align-items: center;
flex-grow: 1;
background: #F5F5F5;
border-radius: 20px;
height: 36px;
padding: 0 10px 0 20px;
color: #999;
}
.nav_search .input_panel ns-input {
font-size: 13px;
padding-left: 10px;
flex-grow: 1;
color: #333;
}
.nav_search .search{
font-size: 14px;
color:skyblue;
padding-left: 15px;
}
.nav_search .cancle{
font-size: 14px;
color: #333333;
padding-left: 15px;
}
.nav_search .cancle:active{
opacity: 0.7
}
效果圖
js部分
首先要把用到的數(shù)據(jù)寫在data中
data: {
/*
inputValue 保存用戶在輸入框中輸入的文字
historyList數(shù)組 用來儲存每次的搜索
*/
inputValue:"",
historyList:[],
},
在wxml的ns-input輸入框中我們綁定了inputText方法虽填，用來實(shí)現(xiàn)獲取用戶輸入的值。
// 讀取輸入值
inputText:function(e){
this.setData({
inputValue :e.detail.value
})
},
//把用戶輸入的值保存在inputValue中
搜索按鈕綁定了doSearch方法曹动，點(diǎn)擊了之后就把用戶的輸入存入historyList數(shù)組中,此處還實(shí)現(xiàn)了只保留5條歷史數(shù)據(jù)且當(dāng)用戶沒有輸入時不保存的效果
doSearch:function(e){
var inputValue = this.data.inputValue;
var historyList = this.data.historyList || [];
if(historyList.length<5&&inputValue!==""){
historyList.unshift(inputValue);
}else if(historyList.length>=5&&inputValue!==""){
historyList.unshift(inputValue);
historyList.pop();
};
wx.setStorageSync('historyList', historyList);
},
wx.setStorageSync是wx:setStorage的同步版本斋日，用于永久保存數(shù)據(jù)，除非用戶刪除墓陈，詳見微信開發(fā)文檔恶守。
這樣我們就永遠(yuǎn)把搜索歷史保存下來了第献。可是怎么取出來呢兔港？
接著往下看
接下來我們需要做一個搜索歷史框用來顯示儲存的搜索歷史數(shù)據(jù)
顯示搜索歷史wxml部分和wxss部分
<view class="search_history_lists" wx:if="{{showHistory}}">
<view class='title'>
歷史搜索
</view>
<view wx:for="{{historyList}}" wx:key="item">
<view class="searchRecord">{{item}}</view>
</view>
<navigator wx:if="{{historyList.length!==0}}" class="clearHistory" bindtap="clearHistory" open-type="navigateBack" hover-class='none'>清除搜索歷史</navigator>
</view>
.search_history_lists{
position: fixed;
left: 0;
top: 56px;
width: 100%;
background-color:#fff;
padding: 0 15px;
box-sizing: border-box;
z-index: 2;
display: flex;
flex-direction: column;
}
.search_history_lists .title{
height: 14px;
width: 100%;
justify-content: space-between;
align-items: center;
font-size: 14px;
line-height: 14px;
font-weight: bolder;
color: #333333;
}
.search_history_lists .searchRecord{
margin-top:22px;
font-size: 14px;
color: #666666;
line-height: 14px;
background: #FFFFFF;
}
.search_history_lists .clearHistory{
margin-top: 20px;
color: red;
font-size: 14px;
line-height: 14px;
}
效果圖
我們打算用wx:if來判斷showHistory的狀態(tài)庸毫，為false時隱藏歷史搜索框，為true時顯示搜索歷史框衫樊。綁定的數(shù)據(jù)都必須在data中聲明飒赃，showHistory的初始值為false。
data: {
inputValue:"",
historyList:[],
showHistory:false,
},
我們在之前的用戶輸入框綁定了bindblur="hideHistory" bind:focus="showHistory"這兩個方法科侈，用這兩個方法來切換showHistory的狀態(tài)载佳，當(dāng)輸入框獲得焦點(diǎn)時顯示歷史搜索框即切換成true，失去焦點(diǎn)時隱藏歷史搜索框切換成false
// 隱藏搜索歷史框
hideHistory:function(){
this.setData({
showHistory: !this.data.showHistory
});
},
// 顯示搜索歷史框
showHistory:function(){
this.setData({
showHistory: !this.data.showHistory,
searchRecord: wx.getStorageSync('searchRecord') || []
})
},
在顯示歷史搜索框的同時顯示歷史數(shù)據(jù)是最好的臀栈，所以我們把讀取緩存數(shù)據(jù)的方法寫在了showHistory方法里蔫慧，wx:getStorageSync用來讀取緩存的數(shù)據(jù)（與wx:setStorageSync相對應(yīng)），我們存的時候用的searchRecord這個名字挂脑，讀的時候也要用這個讀藕漱。
我們用wx:for來遍歷數(shù)組，實(shí)現(xiàn)把數(shù)據(jù)一條條的顯示出來崭闲。
通過wx:if="{{historyList.length!==0}}"來判斷數(shù)組里有沒有數(shù)據(jù)肋联，如果沒有的話就不顯示紅色的“清除搜索歷史”。
清除搜索歷史的方法
清空緩存和數(shù)組就完事了,wx.clearStorageSync方法用于清空緩存的數(shù)據(jù)刁俭。
clearHistory:function(){
wx.clearStorageSync()
this.setData({
searchRecord: []
})
},
GIF效果圖
