微信小程序结合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代码
Dec 05 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
js实现无缝循环滚动
Jun 23 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 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
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
利用python为运维人员写一个监控脚本
2018/03/25 Python
详解django.contirb.auth-认证
2018/07/16 Python
python3 pygame实现接小球游戏
2019/05/14 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python Selenium截图功能实现代码
2020/04/26 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
C/C++有关内存的思考题
2015/12/04 面试题
中学生操行评语
2014/04/24 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
西游记读书笔记
2015/06/25 职场文书
工程主管竞聘书
2015/09/15 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL