深入講解小程式中實作搜尋功能的方法
- 青灯夜游轉載
- 2021-09-06 19:25:399368瀏覽
小程式常見的搜尋功能如何實現？以下這篇文章就來一步步帶大家了解一下小程式中實現搜尋功能的方法，希望對大家有幫助！
在每個小程式開發的過程中，基本上都會配備有搜尋功能，那麼相對智慧化的搜尋功能是如何實現的呢，透過一段時間的學習，我已經學會比較全面的搜尋框功能，來一起看看吧！
開發準備
- 微信小程式
- 有讚vant 元件庫
效果展示
先來看看效果
#前期準備
雲端資料庫導入一些資料用來測試搜尋框功能
實作
在目錄下方新建三個pages
index用來作為搜尋框的第一個頁面
search用來做具體搜尋的頁面
hotsearch是搜尋內容的詳情頁面
首先我們先來看看搜尋框第一個頁面index的佈局，這裡主要介紹搜尋框的內容，下面的其他內容就不在這兒贅述了
這是index.wxml程式碼
<view class="search_1" bindtap="gotoSearch">
<van-search
placeholder="搜索单品" disabled
/>
</view>
<view class="search_2">
<view class="pic" bindtap="list" >
<image src=""></image>
</view>
</view>
</view>
這是搜尋框的search.wxml程式碼
<view class="dewu-search">
<view class="return" >
<view class="return_pic" bindtap="gotoindex">
<image src=""></image>
</view>
<view class="txt">搜索</view>
</view>
</view>
<van-search
value="{{value}}"
show-action
placeholder="输入商品名称、货号"
bind:clear="onClear"
bind:search="onSearch"
bind:cancel="oncancel"
bind:change="onchange"
bindtap="input"
value="{{value}}"
/>
<block wx:if="results.length > 0">
<van-cell wx:for="{{results}}" wx:key="_id" title="{{item.title}}" size="large" />
</block>
<view class="page1" hidden="{{issuggest==true?'hidden':''}}" >
<view class="bd">
<view class="content">热门搜索</view>
<view class="box">
<view class="items">
<view class="item" wx:for="{{goods}}"
wx:key="index" bindtap="hotsearch" data-id="{{item.id}}"
>
{{item.hot}}
</view>
</view>
</view>
</view>
<view class="last">
<view class="content">搜索历史</view>
<view class="box">
<view class="items">
<view class="item" wx:for="{{historyList}}" wx:key="index" data-id="{{item.id}}" bindtap="gotohistoryList"
wx:key="index">
{{item.hot}}
</view>
</view>
</view>
</view>
</view>
<view class="page2" hidden="{{issuggest==false?'hidden':''}}">
<view class="content1">
<view class="title" wx:for="{{goods1}}" data-id="{{item.id}}"
wx:key="index" bindtap="hotsearch" >
{{item.hot}}
</view>
</view>
</view>
</view>js裡面首先要引入雲端資料庫裡的資料
const db = wx.cloud.database();
const dewuCollection = db.collection('dewu');要做到輸入框發生改變時，彈出相關的內容，則需要兩個page，當輸入框有內容輸入時，把隱藏的頁面顯示出來hidden="{{ issuggest==false?'hidden':''}}"來判斷是否要出現相關內容頁面，
用indexOf判斷e.detail（輸入框內容）是否是在雲端資料庫裡存在的，如果是存在的，那麼將這條資料存入一個陣列裡面，並且連接之前搜尋後的數組，再使用 wx.setStorageSync();將輸入框的資料存入storage裡面，然後再wx.getStorageSync()提取資料。
這是當輸入框有資料的時候就會彈出詳情頁面，點擊可以跳到商品的詳情頁
這是搜尋框的邏輯
if(e.detail.length!=0){
this.setData({
issuggest:true,
})
var arr = [];
console.log(this.data.goods.length);
for (var i = 0; i < this.data.goods.length; i++) {
if (this.data.goods[i].hot.indexOf(e.detail)>=0) {
arr.push(this.data.goods[i]);
}
this.setData({
goods1:arr,
})
}
}
else {
console.log('succes');
this.setData({
issuggest:false
})
}
},
async onSearch(e){
var arr1=new Array();
var historyList=new Array();
var storage=new Array();
for (let i = 0; i < this.data.goods.length; i++){
if(e.detail==this.data.goods[i].hot){
arr1.push(this.data.goods[i]);
console.log(arr1);
break
}
else{
arr1.push(e.detail);
console.log(arr1);
}
}
if(arr1.length>1){
this.setData({
storage:arr1.slice(arr1.length-1,arr1.length)
})
}
else{
console.log(arr1,'要存进去的数据');
this.setData({
storage:arr1
})
}
if(this.data.historyList !=[]){
this.data.historyList = this.data.historyList.concat(this.data.storage);//连接
}
else{
this.data.historyList=this.data.storage
}
wx.setStorageSync('historyList', this.data.historyList);
this.setData({
historyList:this.data.historyList
})
},
wx.navigateTo#可以用來跳到詳細的頁面，加上字串模板，判斷id的值，用資料來驅動頁面，跳到相同的頁面不同的資料。
wx.navigateTo({
url: `../hotsearch/hotsearch?id=`+id
})最後也要更新資料
wx.showLoading({
title: '数据加载中...',
})
setTimeout(()=>{
wx.hideLoading()
this.setData({
goodsNav: nav,
goodsList:List,
recommend:List,
goods2:this.data.historyList
})
},1000)
// console.log(goodsList,'===========');
},注意不要忘記要在全域json或局部頁面json中引入需要使用的元件的位址
"usingComponents": {
"van-search":"./miniprogram_npm/@vant/weapp/search/index"
},擴充
這個自動跳到導覽列中間的功能也是挺常用的
#這是wxml程式碼最主要的是scroll- x="true" 讓導覽列在水平方向可以滑動scroll-with-animation="true"是讓滑動產生動畫，scroll-into-view="{{scrollTop }}"
<scroll-view scroll-x="true"
scroll-with-animation="true"
style="width:100%;" class="scroll-view_H "
scroll-into-view="{{scrollTop}}">
<view
wx:for="{{goodsNav}}"
wx:key="index"
id="{{item.id}}"
data-index="{{index}}"
data-type="{{item.type}}"
bindtap="changegoods"
class="scroll-view-item_H {{activeNavIndex == index?'active': ''}} "
>
<text>{{item.text}}</text>
</view>
</scroll-view>
</view>這是綁定在導覽列上面的事件let {index, type} = e.currentTarget.dataset;提取到index 和type ，然後設定一個count當作前幾個不動，然後拼接給id，把id的值傳給scrollTop，讓導覽列跳到scrollTop這個值，這個值就是在中間
console.log(e);
let {index, type} = e.currentTarget.dataset;
console.log("index=" +index, "type="+type);
this.setData({
activeNavIndex:index
})
if (type == 'recommend') {
this.setData({
goodsList: this.data.recommend
})
}
else {
let goods = this.data.recommend.filter((good) => good.camptype == type )
this.setData({
goodsList: goods
})
//console.log(this.data.goods)
}
var index1 = e.currentTarget.dataset.index;
var count = 2;
var id = "item"+(index1-count);//拼接id
if(count == 2 && index1 < 3 || count == 3 && index1 < 2 || count == 4 && index1 < 3){
id = "item0";
}
console.log("下标",index1,"---分类id名称",id)
this.setData({
scrollTop: id
})
},這樣再加上wxss後就可以達到效果了 不過這樣的寫有一個問題，就是當顯示的內容為偶數時，如6，則不能正確的跳到正中間，會跳到3的位置，那樣就有一點兒偏差，這個問題我暫時還沒有解決，不知道有沒有大佬知道這個怎麼解決呢？
原始碼
這裡有專案完整的原始碼，上面給的是部分程式碼，如果有興趣的可以去看看完整原始碼
https: //gitee.com/xinccc/fullstack_huoshan/tree/master/wxapp/dewu
總結
這是我第一次寫一次稍微完整的項目，這裡主要介紹了我在開發過程中遇到的主要困難，雖然總體來說沒有什麼難點，但是對我來說還是意義挺大的，有了一次這樣的經歷，讓我發現了我還有很多內容需要學習，也感謝在我有困難時幫我指點迷津的老師和同學,如果你感覺這篇文章有get到你的地方，不妨給我點個贊，這將為我莫大的鼓勵，各位大佬如果有什麼指點的話，希望可以在評論區一起探討學習。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是深入講解小程式中實作搜尋功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！