微信小程序结合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获取变量
Aug 24 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python构建指数平滑预测模型示例
2019/11/21 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python操作yaml说明
2020/04/08 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
pytorch SENet实现案例
2020/06/24 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
《春笋》教学反思
2014/04/15 职场文书
教师暑期培训感言
2014/08/15 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
mysql优化
2021/04/06 MySQL
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android