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


Posted in Javascript onMarch 26, 2020

结合了微信给的资料,马马虎虎摸索出了一些东西,下面说一下微信小程里序搜索历史功能的实现,下图是实现效果。

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

首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路。

<view wx:for="{{sercherStorage}}" wx:key="item.id">
 <view class="liclass" style="color:#9E9E9E;border-bottom:0;font-size:26rpx;" id="{{item.id}}" bindtap="tapSercherStorage">
 <text style="width:100rpx">{{item.name}}</text>
 </view>
</view>

其次是“清除历史记录”按钮,个人建议在没有搜索历史的时候不显示按钮,因为在下有些强迫症

<view wx:if="{{sercherStorage.length!==0}}" style="text-align:center;" bindtap="clearSearchStorage">
 <view class="history-span">清除历史记录</view>
</view>

(微信小程序的数据交互还是蛮喜欢的)

这里是列表的CSS样式

/*搜索历史列表外部容器样式*/
 .ddclass { 
 position: absolute; 
 width: 100%; 
 margin-top: 10px; 
 left: 0; 

} 

/*搜索历史普通样式*/

 .liclass { 
 font-size: 14px; 
 line-height: 34px; 
 color: #575757; 
 height: 34px; 
 display: block; 
 padding-left: 18px; 
 background-color: #fff; 
 border-bottom: 1px solid #dbdbdb; 
}

最后是一些JS控制

1、参数声明

data: {
 sercherStorage: [],
 StorageFlag: false //显示搜索记录标志位
 }

2、两个主要的JS方法

//清除缓存历史
 clearSearchStorage: function () {
 wx.removeStorageSync('searchData')
 this.setData({
 sercherStorage: [],
 StorageFlag: false,
 })
 },
 //打开历史记录列表
 openLocationsercher: function () {
 this.setData({
 sercherStorage: wx.getStorageSync('searchData') || [], 
 StorageFlag: true,
 listFlag: true,
 })
 }

3、点击搜索添加搜索内容进历史记录

var self = this;
if(self.data.search.length == 0){
 return;
}
//控制搜索历史
var self = this;
if (this.data.search != '') {
 //将搜索记录更新到缓存
 var searchData = self.data.sercherStorage;
 searchData.push({
 id: searchData.length,
 name: self.data.search
 })
 wx.setStorageSync('searchData', searchData);
 self.setData({ StorageFlag: false, })
}

4、在进入搜索页面时,检索出缓存中的搜索历史。(适用于搜索页面是单独页面的业务)

onLoad: function (options) {
 this.openLocationsercher();
 }

5、清空历史记录,只需在上面声明搜索按钮时把”bindtap”属性值设置成写好的JS方法名即可。

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 #Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 #Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 #Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 #Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 #Javascript
小程序云开发之用户注册登录
May 18 #Javascript
小程序云开发实现数据库异步操作同步化
May 18 #Javascript
You might like
PHP开发负载均衡指南
2010/07/17 PHP
PHP分页类集锦
2014/11/18 PHP
php实现Session存储到Redis
2015/11/11 PHP
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
浅析vue.js数组的变异方法
2018/06/30 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
python运行其他程序的实现方法
2017/07/14 Python
Python中django学习心得
2017/12/06 Python
python实现图片文件批量重命名
2020/03/23 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python程序暂停的正常处理方法
2019/11/07 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
挂职思想汇报
2013/12/31 职场文书
先进个人获奖感言
2014/01/24 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
小学生家长寄语
2014/04/02 职场文书
市场拓展计划书
2014/05/03 职场文书
美食节策划方案
2014/05/26 职场文书
校运动会广播稿300字
2014/10/07 职场文书
学术会议开幕词
2016/03/03 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python