E企盈营销工具技术服务商 热线:4006-838-530

微信小程序历史搜索功能的实现

E企盈直播平台营销卖货系统

最近公司在做一个内部的管理系统,是基于微信小程序的,我看了一下和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}#####效果图##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.length5&&inputValue!==””){      historyList.unshift(inputValue);    }else if(historyList.length=5&&inputValue!==””){      historyList.unshift(inputValue);      historyList.pop();    };    wx.setStorageSync(‘historyList’, historyList);  },wx.setStorageSync是wx:setStorage的同步版本,用于永久保存数据,除非用户删除,详见微信开发文档。这样我们就永远把搜索历史保存下来了。可是怎么取出来呢?接着往下看接下来我们需要做一个搜索历史框用来显示储存的搜索历史数据##显示搜索历史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的状态,为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.removeStorageSync(‘searhRecord’)      this.setData({        searchRecord: []      })  },###GIF效果图

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序历史搜索功能的实现
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏