微信小程序结合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 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解vue-cli3使用
Aug 14 Javascript
vue 实现路由跳转时更改页面title
Nov 05 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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
python中set常用操作汇总
2016/06/30 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
表演方阵解说词
2014/02/08 职场文书
文明寝室申报材料
2014/05/12 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
赞助商致辞
2015/07/30 职场文书
如何拟写通知正文?
2019/04/02 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python