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

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

主要为大家详细介绍了微信小程序实现搜索历史功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

<view wx:for="{{sercherStorage}}" wx:key="item.id">

<view class="liclass" style="color:#9E9E9E;border-bottom:0;font-size:26rpx;" id="{{item.id}}" bindtap="tapSercherStorage">

<text style="width:100rpx">{{item.name}}</text>

</view>

这里是列表的CSS样式

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

.ddclass {

position: absolute;

width: 100%;

margin-top: 10px;

left: 0;

}

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

.liclass {

background-color: #fff;

border-bottom: 1px solid #dbdbdb;

}

最后是一些JS控制

1、参数声明

data: {

sercherStorage: [],

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

}

2、两个主要的JS方法

})

},

//打开历史记录列表

openLocationsercher: function () {

this.setData({

sercherStorage: wx.getStorageSync('searchData') || [],

StorageFlag: true,

listFlag: true,

})

}