?搜索頁面（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 = thiswx.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.storelet 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)存入,在頁面循環顯示即可

總結

以上是生活随笔為你收集整理的小程序搜索功能的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。