ミニ プログラムの一般的な検索機能を実装するにはどうすればよいですか?次の記事では、ミニ プログラムに検索機能を実装する方法をステップごとに説明します。
小さなプログラムを開発する過程で、基本的には検索機能が組み込まれることになりますが、比較的インテリジェントな検索機能はどのように実装されるのでしょうか?勉強の一環として、比較的包括的な検索ボックス機能を学習しました。見てみましょう。
まずはエフェクトを見てみましょう
事前準備
クラウド データベースはテストするデータをインポートします検索フレーム機能
realization
indexの下に3つの新しいページを作成します。検索ボックスの最初のページ
search は特定の検索に使用されるページです
hotsearch は検索コンテンツの詳細ページ
まず、検索ボックスの 1 ページ目のインデックスのレイアウトを見てみましょう。ここでは、検索ボックスの内容を中心に紹介します。その他の内容については、ここでは説明しません。詳細はこちら
これは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コードですbox
<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 を最初にクラウド データベースに導入する必要があります Data
const db = wx.cloud.database();
const dewuCollection = db.collection('dewu');入力ボックスが変更されたときに関連コンテンツをポップアップするには、2 ページが必要です。入力ボックスにコンテンツが入力されている場合の場合、非表示ページが表示されます
hidden="{{ issuggest==false?'hidden':''}}" を使用して、関連コンテンツ ページを表示するかどうかを決定します。
indexOf を使用して、e.detail (入力ボックスの内容) がクラウド データベースに存在するかどうかを確認します。存在する場合は、このデータを配列に保存し、以前に検索したものに接続します配列の場合、 wx.setStorageSync(); を使用して入力ボックス内のデータをストレージに保存し、次に 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
})
},
を使用して、詳細ページへのジャンプ、文字列テンプレートの追加、IDの値の決定、データを使用してページを駆動し、異なるデータを持つ同じページにジャンプします。 <pre class='brush:php;toolbar:false;'>wx.navigateTo({
url: `../hotsearch/hotsearch?id=`+id
})</pre>
wx.showLoading({
title: '数据加载中...',
})
setTimeout(()=>{
wx.hideLoading()
this.setData({
goodsNav: nav,
goodsList:List,
recommend:List,
goods2:this.data.historyList
})
},1000)
// console.log(goodsList,'===========');
},グローバル JSON またはローカルで使用する必要があるコンポーネントのアドレスを忘れないように注意してください。 page json
"usingComponents": {
"van-search":"./miniprogram_npm/@vant/weapp/search/index"
},Extension
ナビゲーションバーの中央に自動的にジャンプするこの機能も非常によく使用されます
これはWXML コードの最も重要な部分
ナビゲーション バーを水平方向にスライドさせます scroll-with-animation="true" スライドをアニメーションさせます。 scroll-into-view="{{scrollTop }}"<pre class='brush:php;toolbar:false;'> <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?&#39;active&#39;: &#39;&#39;}} "
>
<text>{{item.text}}</text>
</view>
</scroll-view>
</view></pre>これはナビゲーション バーにバインドされたイベントです
インデックスとタイプを抽出して設定します。カウントは最初のいくつかとして使用され、その後 id に結合され、id の値が # に渡されます。 ##scrollTop、ナビゲーション バーが scrollTop# にジャンプします ##この値、この値は中央にあります<pre class='brush:php;toolbar:false;'> console.log(e);
let {index, type} = e.currentTarget.dataset;
console.log("index=" +index, "type="+type);
this.setData({
activeNavIndex:index
})
if (type == &#39;recommend&#39;) {
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
})
},</pre>wxss を追加すると効果が得られます
ただし、このように書くと問題があり、表示内容が6などの偶数の場合、正しく真ん中にジャンプできず、3の位置にジャンプしてしまい、若干のズレが生じます。 . この問題はまだ解決していませんが、解決方法を知っている人はいますか？ #ソース コード
https: //gitee.com/xinccc/fullstack_huoshan/tree/master/wxapp/dewu
まとめ
少し完成度の高いプロジェクトを書くのは初めてです。ここでは、開発プロセスで遭遇した主な困難を主に紹介します。全体的に困難な点はありませんが、それは意味します。このような経験をしたことで、自分にはまだまだ学ぶことがたくさんあると実感しました。また、困ったときに助けてくれた先生やクラスメートにも感謝しています。この記事が届いたと感じたらぜひ、「いいね！」をしていただければ大変励みになります。アドバイスがございましたら、コメント欄で一緒に議論し、学んでいただければ幸いです。
プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！
以上がミニプログラムに検索機能を実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
メモ帳++7.3.1
使いやすく無料のコードエディター
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ホットトピック
7704
15164014139352128825123129