?搜索頁(yè)面（receiveCenter.wxss）

 <view class="search"><view class="search_arlet"><icon class="searchcion" size='15' type='search'></icon><input type='text' disabled placeholder="門(mén)點(diǎn)、港區(qū)搜索" value="{{store}}" bindtap='searchInput'/></view></view>

跳轉(zhuǎn)到新建搜索頁(yè)面?

data:{store:''//新建搜索頁(yè)面?zhèn)鬟f過(guò)來(lái)的值
}
// 搜索searchInput:function(){var that = thiswx.navigateTo({url: baseUrl + api.pageUrl.SEARCH_PAGE_URL + '?id=' + this.data.store})},

新建搜索頁(yè)面search.wxml

<view class="search"><view class="search_arlet"><icon class="searchcion" size='15' type='search'></icon><input class="text" focus="{{name_focus}}" placeholder="門(mén)點(diǎn)、港區(qū)搜索" data-store="{{inputValue}}" value="{{inputValue}}" bindinput='searchInput' bindconfirm="setSearchStorage" /></view></view><view class="textSearch"><text>空內(nèi)容搜索為搜索全部</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>

?新建搜索頁(yè)面search.js

?

data: {inputValue: '',//輸入的值getSearch: [],歷史記錄modalHidden: true,name_focus: true,//獲取焦點(diǎn)keydown_number: 0,//檢測(cè)input框內(nèi)是否有內(nèi)容store:''},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad: function (options) {//獲取上一頁(yè)面?zhèn)鬟f過(guò)來(lái)的值var store = options.id;this.setData({store: store})},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成*/onReady: function () {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示*/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')},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏*/onHide: function () {console.log('search is onHide')wx.redirectTo({url: '../search/search'})},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載*/onUnload: function () {},/*** 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作*/onPullDownRefresh: function () {},/*** 頁(yè)面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {},/*** 用戶(hù)點(diǎn)擊右上角分享*/onShareAppMessage: function () {},
//獲取輸入的值searchInput: function (e) {this.setData({inputValue: e.detail.value})console.log('bindInput'+this.data.inputValue) ?},?//點(diǎn)擊賦值到input框this_value: function (e) {this.setData({name_focus: true})let value = e.currentTarget.dataset.text;this.setData({inputValue: value,keydown_number: 1})},//回車(chē)搜索setSearchStorage:function(e){let store = e.currentTarget.dataset.storelet data;let localStorageValue = [];//設(shè)置一個(gè)空數(shù)組,把每次輸入的值存進(jìn)去判斷如果小于等于10就添加進(jìn)數(shù)組,否則就刪除下標(biāo)為零的值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();//當(dāng)前頁(yè)面let prevPage = pages[pages.length - 2];//上一頁(yè)面//把值傳入上一搜索主頁(yè)面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;
}

?點(diǎn)擊回車(chē)時(shí)把值傳給上一頁(yè)面,上一頁(yè)面調(diào)用接口把要搜索的值根據(jù)接口賦值即可搜索

歷史記錄利用wx.getStorageSync(string key)存入,在頁(yè)面循環(huán)顯示即可

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。