微信小程序实现历史搜索

在index.wxml中

<view class="history">

<view class="search-bar">

<input type="text" model:value="{{keywords}}"/>

<text class="label" bind:tap="search">搜索</text>

</view>

<view class="title">

历史搜索 <text class="icon-delete" bind:tap="clearHistory">x</text>

</view>

<view class="keywords">

<navigator wx:for="{{keywordsArray}}" url="/pages/test/index" wx:key="*this">

{{item}}

</navigator>

</view>

</view>

在index.wxss中

.history {

margin-top: 20rpx;

padding: 30rpx 20rpx;

border-radius: 10rpx;

background-color: #fff;

}

.history .search-bar {

display: flex;

}

.history .search-bar .label {

width: 90rpx;

margin-right: 10rpx;

text-align: right;

line-height: 70rpx;

}

.history .search-bar input {

flex: 1;

padding-left: 40rpx;

border-radius: 60rpx;

}

.history .title {

display: flex;

justify-content: space-between;

margin-top: 30rpx;

padding-left: 20rpx;

font-size: 30rpx;

}

.history .title .icon-delete {

width: 36rpx;

height: 36rpx;

text-align: center;

line-height: 32rpx;

border-radius: 50%;

color: #fff;

transform: scale(0.9);

background-color: #ccc;

}

.history .keywords {

display: flex;

flex-wrap: wrap;

margin-top: 10rpx;

border-radius: 10rpx;

}

.history .keywords navigator {

margin-right: 20rpx;

margin-top: 20rpx;

padding: 8rpx 28rpx;

border-radius: 50rpx;

background-color: #f7f6f7;

font-size: 28rpx;

}

在index.wxjs

Page({

data:{

// 输入框的信息

keywords:'',

// 历史记录的信息

keywordsArray:wx.getStorageSync('keywordsArray')||[]

},

// 点击搜索

search(){

this.setData({

// 历史记录的信息为 存储好的历史信息和新搜索的信息

keywordsArray:[...this.data.keywordsArray,this.data.keywords],

// 给搜索框重新赋值为空

keywords:''

})

//将历史搜索信息存储起来

wx.setStorageSync('keywordsArray', this.data.keywordsArray)

},

//点击x号

clearHistory() {

// 删除历史存储的信息

wx.removeStorageSync('keywordsArray');

//让页面历史存储信息为空

this.setData({keywordsArray: []})

},

})