微信小程序————搜索框获取本地缓存搜索记录

微信小程序获取本地缓存的搜索记录

html

<!--index.wxml-->
//这里是搜索框
<view class="box_search"><image src="/images/ic_search.png" class="ic_search"></image><input type="text" value="{{keywords}}" bindinput="get_keyword" placeholder="搜索店铺名或商品名" bindconfirm="getInputValue" placeholderStyle="color: #999" data-input="values" bindblur="get_search"></input><image src="/images/ic_close.png" class="ic_clear" wx:if="{{keywords}}" bindtap="toClear"></image>
</view>//这里显示搜索记录<block wx:else ><view class="hotbox"><view class="text">搜索历史:</view><view class="oldsearch"><view   wx:for="{{ history }}" wx:key="*this"><!-- <navigator class="label" url="/store/search_store?inputValue={{ item }}" >{{item}}</navigator> --><view class="label" data-value="{{item}}" bindtap="get_oldsearch" >{{item}}</view></view> </view></view>  <view class="clear" bindtap="clearHis">清除搜索历史</view>
</block>

css样式

//这里只显示搜索历史的css样式
.hotbox {height: 250rpx;
}
.text{margin: 0 0 0 5rpx;
}.label {min-width: 140rpx;height: 36rpx;background-color: #96fbc4;border-radius: 48rpx;text-align: center;line-height: 36rpx;padding: 0 15rpx 0 15rpx  ;margin: 5rpx 2rpx 0 10rpx;
}.clear {display: flex;justify-content: center;
}
.oldsearch{display: flex;flex-wrap: wrap;}

搜索历史的重中之重是js

var app = getApp();Page({data: {list: [],keywords: '',history: [],inputValue: null,oldhistory: [],},onLoad: function (options) {},home: function (e) {var a = parseInt(e.currentTarget.dataset.index),s = this.data.list;wx.setStorageSync("distance", s[a].distance),app.XcxData.store_id = s[a].store_id,wx.setStorageSync("storeName", s[a].store_name), wx.setStorageSync("storeImage", s[a].image),wx.setStorageSync("storePhone", s[a].phone), s[a].meetReduce && wx.setStorageSync("meetReduce", s[a].meetReduce),wx.navigateTo({url: "../home/home"});},//  点击搜索给查找传数据get_keyword: function (e) {console.log(e);this.setData({keywords: e.detail.value})},_goods: function (e) {var id = e.currentTarget.dataset.id;console.log(e.currentTarget.dataset);var store_id = e.currentTarget.dataset.store_id;app.XcxData.store_id = store_id;wx.navigateTo({url: "/pages/details/details?id=" + id + "&store_id=" + store_id});},//  搜索获取门店信息get_search: function () {var t = this,keywords = t.data.keywords;if (keywords == '') {wx.showToast({title: '请输入店铺名称！',icon: 'none',duration: 2000})return false}app.sendRequest({url: '/store/search_store',type: 'post',data: {name: keywords},loadTitle: "搜索中...",success: function (e) {1 == e.status && t.setData({list: e.store})}})},//  点击搜索历史获取门店信息get_oldsearch: function (e) {var t = this,keywords = e.currentTarget.dataset.value;app.sendRequest({url: '/store/search_store',type: 'post',data: {name: keywords},loadTitle: "搜索中...",success: function (e) {1 == e.status && t.setData({list: e.store})if (0== e.status) {wx.showToast({title: '未找到该商品',icon: 'none',duration: 2000})}},})},toClear: function () {this.setData({keywords: null})},//  进页面显示历史搜索记录onShow: function () {let history = wx.getStorageSync('history');// console.log(wx.getStorageSync('history'))  if (history) {//如果有搜索历史的本地this.setData({history: history})} else {//没有搜索历史时      wx.setStorageSync('history', []);}},//  添加搜索记录getInputValue: function (e) {//开始处理历史记录(其实这里可以再封装成一个方法,这里为了把思路缕清)console.log("搜索关键词:" + e.detail.value.trim());//排除一下输入为空的情况if (!e.detail.value || e.detail.value.trim() == "") {} else {let oldhistory = wx.getStorageSync('history');//搜索历史去重let history = oldhistory.filter(item => {return item !== e.detail.value.trim()})//限制长度为10        if (history.length > 9) {history.pop();}//添加新历史history.unshift(e.detail.value.trim());//存入localStorage             wx.setStorageSync('history', history);}},//清除历史记录clearHis: function (e) {wx.setStorageSync('history', []);this.setData({history: []})}});

特别讲解一下js

 //  添加搜索记录，对应的是html里面搜索框的bindconfirm="getInputValue" 只有敲击回车之后才会添加到缓存里面getInputValue: function (e) {//开始处理历史记录(其实这里可以再封装成一个方法,这里为了把思路缕清)console.log("搜索关键词:" + e.detail.value.trim());//排除一下输入为空的情况if (!e.detail.value || e.detail.value.trim() == "") {} else {let oldhistory = wx.getStorageSync('history');//搜索历史去重let history = oldhistory.filter(item => {return item !== e.detail.value.trim()})//限制长度为10        if (history.length > 9) {history.pop();}//添加新历史history.unshift(e.detail.value.trim());//存入localStorage              wx.setStorageSync('history', history);}},

微信小程序————搜索框获取本地缓存搜索记录相关推荐

微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
好玩的表情包机器人微信小程序源码下载支持直接搜索仿聊天界面获取支持流量主
这是一款和表情包有关的一款机器人小程序界面就相当于是聊天界面,然后是你和AI的界面打开小程序后会自动全网推送几个表情包给你然后你可以点击下方的说你还要然后又会随机发给你当然你也可以输入关键词然 ...
微信小程序（第七章）- 搜索框的实现
微信小程序(第七章)- 搜索框的实现搜索框的组成定义布局容器微信小程序1个页面所对应的4个文件具体实现步骤框架实现样式实现搜索框的组成外部容器i 内部容器两者关系:外部容器包裹内部容 ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
微信中html5获取手机号,微信小程序用户授权获取手机号（getPhoneNumber）
前言小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如 ...
微信小程序自定义组件之胶囊对齐搜索FloatSearch
大家好哇,我是梦辛工作室的灵,最近又写了一个 ui组件,是与微信小程序胶囊所对齐的一个搜索框,还带展开过度动画哦,老样子,先看效果图效果还是不错的,然后来看下如何使用: //先引入组件 &qu ...
php网页抓取浏览者手机号码_微信小程序开发之获取用户手机号码(php接口解密)...
后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...
微信小程序提示框提示
微信小程序提示框很常见,有的项目弹出提示选择关闭的时候需要不再弹出,清理缓存的时候才弹出. var s = wx.getStorageSync('sh')if (s == '') {// s= tru ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...

微信小程序————搜索框获取本地缓存搜索记录

微信小程序————搜索框获取本地缓存搜索记录相关推荐

最新文章

热门文章