vue 实现搜索历史_微信小程序实现搜索历史功能

结合了微信给的资料，马马虎虎摸索出了一些东西，下面说一下微信小程里序搜索历史功能的实现，下图是实现效果。

首先，定义历史记录的显示风格和方式，在下用的是列表模式，没有使用什么比较酷炫的套路。

其次是“清除历史记录”按钮，个人建议在没有搜索历史的时候不显示按钮，因为在下有些强迫症

清除历史记录

(微信小程序的数据交互还是蛮喜欢的)

这里是列表的css样式

/*搜索历史列表外部容器样式*/

.ddclass {

position: absolute;

width: 100%;

margin-top: 10px;

left: 0;

}

/*搜索历史普通样式*/

.liclass {

font-size: 14px;

line-height: 34px;

color: #575757;

height: 34px;

display: block;

padding-left: 18px;

background-color: #fff;

border-bottom: 1px solid #dbdbdb;

}

最后是一些js控制

1、参数声明

data: {

sercherstorage: [],

storageflag: false //显示搜索记录标志位

}

2、两个主要的js方法

//清除缓存历史

clearsearchstorage: function () {

wx.removestoragesync('searchdata')

this.setdata({

sercherstorage: [],

storageflag: false,

})

//打开历史记录列表

openlocationsercher: function () {

this.setdata({

sercherstorage: wx.getstoragesync('searchdata') || [],

storageflag: true,

listflag: true,

})

}

3、点击搜索添加搜索内容进历史记录

var self = this;

if(self.data.search.length == 0){

return;

}

//控制搜索历史

var self = this;

if (this.data.search != '') {

//将搜索记录更新到缓存

var searchdata = self.data.sercherstorage;

searchdata.push({

id: searchdata.length,

name: self.data.search

})

wx.setstoragesync('searchdata', searchdata);

self.setdata({ storageflag: false, })

}

4、在进入搜索页面时，检索出缓存中的搜索历史。(适用于搜索页面是单独页面的业务)

onload: function (options) {

this.openlocationsercher();

}

5、清空历史记录，只需在上面声明搜索按钮时把”bindtap”属性值设置成写好的js方法名即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

vue 实现搜索历史_微信小程序实现搜索历史功能相关推荐

微信小程序摄像头监控_微信小程序拍照和摄像功能实现方法示例
本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件 ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
小程序搜索框_微信小程序搜索及优化相关知识科普
生活中我们常常会用到微信小程序,但很多人不知道该如何搜索.找到小程序:而有些已经做了自己的小程序的商家,也不懂怎么提升自己的微信小程序搜索效果.所以下面就跟大家科普下这两个问题. 1.怎么搜索微信小程 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
onenetsim定位功能吗_微信小程序新增后台定位功能，你会卸载地图APP用微信导航吗...
[PConline]8月8日,根据微信官方发布的消息显示,小程序新增后台定位功能,并对自动化测试功能进行了升级.据介绍,为了满足线路导航.路线记录等服务场景下,小程序需要长时间持续定位来提供服务.当用 ...
python人脸检测与微信小程序_微信小程序实现人脸检测功能
本文为大家分享了微信小程序实现人脸检测的具体代码,供大家参考,具体内容如下因为本文章的人脸检测技术运用的是百度云人工智能,首先要有百度云的账号. 近期,人脸识别已经升级到了V3,开启了测试,所以也依 ...
微信小程序vue轮播图_微信小程序-swiper（轮播图）抖动问题
ps:问题组件swiper(轮播图)真机上不自动滚动一直卡在那里抖动以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll- ...
vue 图片宫格_微信小程序多宫格/九宫格抽奖基于vue来写
/*整体布局采用定位实现 gameBox:父盒子,最外层背景图 bg1:灰色灯 bg2:点击开始按钮后,白色灯出现,同时要每个500s同bg1做切换隐藏显示 start:按钮样式 item1-8:通过 ...

vue 实现搜索历史_微信小程序实现搜索历史功能

vue 实现搜索历史_微信小程序实现搜索历史功能相关推荐

最新文章

热门文章