微信小程序结合Storage实现搜索历史效果


Posted in Javascript onMay 18, 2019

本文实例为大家分享了微信小程序实现搜索历史效果的具体代码,供大家参考,具体内容如下

实现目标

微信小程序结合Storage实现搜索历史效果

代码实现

集合wx.setStorageSync()和wx.getStorageSync()这两个同步函数来实现这个功能实际上非常简单。

<!-- wxml -->
<view class="search-box">
 <view class='icon'>
  <image src='../../assets/search.png' mode='widthFix'></image>
  <!-- 使用bindinput属性绑定getSearchKey函数获取input组件中的值-->
  <!-- 使用bindblur属性绑定routeToSearchResPage函数处理input失去焦点事件-->
  <input placeholder='搜索你想购买的商品' bindinput='getSearchKey' bindblur='routeToSearchResPage'></input>
 </view>
 <text>取消</text>
</view>
<view class='options'>
 <text>历史搜索记录</text>
 <text bindtap='clearHistory'>清空</text>
</view>
<view class='options'>
<!-- 遍历 history 数组 -->
 <text class='item' wx:for='{{history}}' data-index='{{index}}' bindtap='routeToSearchResPage'>{{item}}</text>
</view>

样式表 可无视

/* wxss */
.search-box {
 background-color: #142341;
 overflow: hidden;
 padding: 3%;
}

.search-box .icon {
 width: 80%;
 padding-left: 2%;
 background-color: #fff;
 float: left;
 border-radius: 1rem;
}

.search-box .icon image {
 width: 1rem;
 height: 1rem;
 display: block;
 margin: 0.5rem 0;
 float: left;
}

.search-box input {
 display: block;
 font-size: 0.8rem;
 height: 2rem;
 line-height: 2rem;
 float: left;
 margin-left: 5%;
}

.search-box text {
 width: 18%;
 float: left;
 color: #fff;
 line-height: 2rem;
 text-align: center;
 font-size: 0.8rem;
}

.options {
 width: 94%;
 margin: 3%;
 font-size: 0.8rem;
 color: #999;
}

.options text:last-child {
 color: #1268bb;
 float: right;
}

.options .item {
 padding: 0.2rem 0.5rem;
 background-color: #eee;
 float: left !important;
 color: #565656 !important;
 border-radius: 0.1rem;
 margin: 3%;
}

JavaScript

//index.js
Page({
 data: {
  searchKey: "",
  history: []
 },
 //获取input文本
 getSearchKey: function(e) {
  this.setData({
   searchKey: e.detail.value
  })
 },
 // 清空page对象data的history数组 重置缓存为[]
 clearHistory: function() {
  this.setData({
   history: []
  })
  wx.setStorageSync("history", [])
 },
 // input失去焦点函数
 routeToSearchResPage: function(e) {
  //对历史记录的点击事件 已忽略
  let _this = this;
  let _searchKey = this.data.searchKey;
  if (!this.data.searchKey) {
   return
  }

  let history = wx.getStorageSync("history") || [];
  history.push(this.data.searchKey)
  wx.setStorageSync("history", history);
 },
 //每次显示钩子函数都去读一次本地storage
 onShow: function() {
  this.setData({
   history: wx.getStorageSync("history") || []
  })
 }
})

本地存储可在微信开发者工具调试的Storage可见。

微信小程序结合Storage实现搜索历史效果

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

Javascript 相关文章推荐
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
js判断两个数组相等的5种方法
May 06 Javascript
Fetch超时设置与终止请求详解
May 18 #Javascript
微信小程序实现搜索历史功能
Mar 26 #Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 #Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 #Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 #Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 #Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
用python解压分析jar包实例
2020/01/16 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
什么是索引指示器
2012/08/20 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
长辈证婚人证婚词
2014/01/09 职场文书
幼儿园招生广告
2014/03/19 职场文书
关于安全演讲稿
2014/05/09 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
暑期教师培训方案
2014/06/07 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
自我评价优缺点范文
2015/03/11 职场文书
学校运动会感想
2015/08/10 职场文书