版权声明：Fang格子 https://blog.csdn.net/qq_41874847/article/details/85321625
搜索页面（receiveCenter.wxss）
<view class="search">
<view class="search_arlet">
<icon class="searchcion" size='15' type='search'></icon>
<input type='text' disabled placeholder="门点、港区搜索" value="{{store}}" bindtap='searchInput'/>
</view>
</view>
跳转到新建搜索页面
data:{
store:''//新建搜索页面传递过来的值
}
// 搜索
searchInput:function(){
var that = this
wx.navigateTo({
url: baseUrl + api.pageUrl.SEARCH_PAGE_URL + '?id=' + this.data.store
})
},新建搜索页面search.wxml
<view class="search">
<view class="search_arlet">
<icon class="searchcion" size='15' type='search'></icon>
<input class="text" focus="{{name_focus}}" placeholder="门点、港区搜索" data-store="{{inputValue}}" value="{{inputValue}}" bindinput='searchInput' bindconfirm="setSearchStorage" />
</view>
</view>
<view class="textSearch">
<text>空内容搜索为搜索全部</text>
</view>
<view class="Search_record_box">
<view class="Search_record_text">
<text>历史搜索</text>
<image bindtap='clearSearchStorage' src='../../../images/delecte.png'></image>
</view>
<view class="History-box">
<view class="History-list" wx:for="{{getSearch}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx" >
<text wx:if="{{itemName != ''}}" data-text="{{itemName}}" bindtap='this_value'>{{itemName}} </text>
</view>
</view>
</view>
<modal class="modal" hidden="{{modalHidden}}" bindconfirm="modalChangeConfirm" bindcancel="modalChangeCancel">
<view class='qingk'>清空浏览记录</view>
</modal>新建搜索页面search.js
data: {
inputValue: '',//输入的值
getSearch: [],历史记录
modalHidden: true,
name_focus: true,//获取焦点
keydown_number: 0,//检测input框内是否有内容
store:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取上一页面传递过来的值
var store = options.id;
this.setData({
store: store
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var getSearch = wx.getStorageSync('searchData');
var store = this.data.store
//只显示十条历史记录
if (getSearch.length < 10) {
getSearch.push(this.data.inputValue)
} else {
getSearch.splice(0, 1)
getSearch.push(this.data.inputValue)
}
this.setData({
getSearch: getSearch,
inputValue: store
})
console.log('search is onshow')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('search is onHide')
wx.redirectTo({
url: '../search/search'
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//获取输入的值
searchInput: function (e) {
this.setData({
inputValue: e.detail.value
})
console.log('bindInput'+this.data.inputValue)
},
//点击赋值到input框
this_value: function (e) {
this.setData({
name_focus: true
})
let value = e.currentTarget.dataset.text;
this.setData({
inputValue: value,
keydown_number: 1
})
},
//回车搜索
setSearchStorage:function(e){
let store = e.currentTarget.dataset.store
let data;
let localStorageValue = [];
//设置一个空数组,把每次输入的值存进去
判断如果小于等于10就添加进数组,否则就删除下标为零的值
var searchData = wx.getStorageSync('searchData') || []
if (searchData.length <= 10){
searchData.push(this.data.inputValue)
}else{
searchData.splice(0, 1)
searchData.push(this.data.inputValue)
}
wx.setStorageSync('searchData', searchData)
let pages = getCurrentPages();//当前页面
let prevPage = pages[pages.length - 2];//上一页面
//把值传入上一搜索主页面
prevPage.setData({
store: e.currentTarget.dataset.store,
});
wx.navigateBack({
delta: 1
})
// this.onLoad();
},
modalChangeConfirm: function () {
wx.setStorageSync('searchData', [])
this.setData({
modalHidden: true
})
wx.redirectTo({
url: '../search/search'
})
},
modalChangeCancel: function () {
this.setData({
modalHidden: true
})
},
clearSearchStorage: function () {
this.setData({
modalHidden: false
})
}@import "../receiveCenter.wxss";
page{
height: 100%;
}
.Search_record_box{
height:90%;
background-color: white
}
.textSearch{
font-size: 28rpx;
color: #898989;
margin-left: 30rpx;
padding: 20rpx;
}
.Search_record_text{
width:92%;
height: 44rpx;
padding: 15rpx;
margin: 0px auto
}
.Search_record_text>text {
font-size: 28rpx;
color: #898989;
}
.hot_box_text>text {
font-size: 28rpx;
color: #898989;
margin-left: 20rpx;
}
.hot_box_text {
margin-top: 40rpx;
}
.Search_record_text>image {
width: 44rpx;
height: 44rpx;
vertical-align: middle;
float: right;
margin-top: 5rpx;
}
.History-box{
width: 100%;
}
.History-list {
width: 90%;
margin: 10px auto
}
.History-list>text {
height: 65rpx;
border-radius: 5px;
background: #f5f5f5;
max-width: 100%;
padding-left: 24rpx;
padding-right: 24rpx;
line-height: 65rpx;
font-size: 33rpx;
color: #393939;
margin-bottom: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
margin-right: 20rpx;
float: left;
}
.qingk{
margin-left: 200rpx;
}点击回车时把值传给上一页面,上一页面调用接口把要搜索的值根据接口赋值即可搜索
历史记录利用wx.getStorageSync(string key)存入,在页面循环显示即可