最近公司在做一个内部的管理系统，是基于微信小程序的，我看了一下和Vue比较类似，布局方面有HTML和CSS基础的人都可以做，还是比较容易上手的，现在先记录一下搜索框保留搜索历史的功能的实现。
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="请输入产品名称/产品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是我们自己封装并且引入的一个组件，能实现某些特定的效果，各位可以用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
}
效果图
搜索框效果图.PNG
js部分
首先要把用到的数据写在data中
data: {
/*
inputValue 保存用户在输入框中输入的文字
historyList数组 用来储存每次的搜索
*/
inputValue:"",
historyList:[],
},
在wxml的ns-input输入框中我们绑定了inputText方法，用来实现获取用户输入的值。
// 读取输入值
inputText:function(e){
this.setData({
inputValue :e.detail.value
})
},
//把用户输入的值保存在inputValue中
搜索按钮绑定了doSearch方法，点击了之后就把用户的输入存入historyList数组中,此处还实现了只保留5条历史数据且当用户没有输入时不保存的效果
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的同步版本，用于永久保存数据，除非用户删除，详见微信开发文档。
微信缓存API.PNG
这样我们就永远把搜索历史保存下来了。可是怎么取出来呢？
接着往下看
接下来我们需要做一个搜索历史框用来显示储存的搜索历史数据
显示搜索历史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;
}
效果图
搜索历史效果图.PNG
我们打算用wx:if来判断showHistory的状态，为false时隐藏历史搜索框，为true时显示搜索历史框。绑定的数据都必须在data中声明，showHistory的初始值为false。
data: {
inputValue:"",
historyList:[],
showHistory:false,
},
我们在之前的用户输入框绑定了bindblur="hideHistory" bind:focus="showHistory"这两个方法，用这两个方法来切换showHistory的状态，当输入框获得焦点时显示历史搜索框即切换成true，失去焦点时隐藏历史搜索框切换成false
// 隐藏搜索历史框
hideHistory:function(){
this.setData({
showHistory: !this.data.showHistory
});
},
// 显示搜索历史框
showHistory:function(){
this.setData({
showHistory: !this.data.showHistory,
searchRecord: wx.getStorageSync('searchRecord') || []
})
},
在显示历史搜索框的同时显示历史数据是最好的，所以我们把读取缓存数据的方法写在了showHistory方法里，wx:getStorageSync用来读取缓存的数据（与wx:setStorageSync相对应），我们存的时候用的searchRecord这个名字，读的时候也要用这个读。
我们用wx:for来遍历数组，实现把数据一条条的显示出来。
通过wx:if="{{historyList.length!==0}}"来判断数组里有没有数据，如果没有的话就不显示红色的“清除搜索历史”。
清除搜索历史的方法
清空缓存和数组就完事了,wx.clearStorageSync方法用于清空缓存的数据。
clearHistory:function(){
wx.clearStorageSync()
this.setData({
searchRecord: []
})
},
GIF效果图
效果演示.gif
网友评论