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


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 相关文章推荐
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
详解webpack+express多页站点开发
Dec 22 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
教你如何使用php session
2013/10/28 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
JS常见算法详解
2017/02/28 Javascript
javascript中的面向对象
2017/03/30 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
express express-session的使用小结
2018/12/12 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
转预备党员政审材料
2014/02/06 职场文书
保研推荐信
2014/05/09 职场文书
公司承诺书范文
2014/05/19 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
节水宣传标语口号
2015/12/26 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android