ミニプログラムに検索機能を実装する方法の詳細な説明

ミニ プログラムの一般的な検索機能を実装するにはどうすればよいですか?次の記事では、ミニ プログラムに検索機能を実装する方法をステップごとに説明します。

小さなプログラムを開発する過程で、基本的には検索機能が組み込まれることになりますが、比較的インテリジェントな検索機能はどのように実装されるのでしょうか?勉強の一環として、比較的包括的な検索ボックス機能を学習しました。見てみましょう。

#開発の準備

WeChat ミニ プログラム
• Youzanvant コンポーネント ライブラリ
#エフェクトの表示

まずはエフェクトを見てみましょう

事前準備

クラウド データベースはテストするデータをインポートします検索フレーム機能

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?&#39;hidden&#39;:&#39;&#39;}}" >
        <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?&#39;hidden&#39;:&#39;&#39;}}">
      <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(&#39;succes&#39;);
      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,&#39;要存进去的数据&#39;);
      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(&#39;historyList&#39;, this.data.historyList);
   this.setData({
    historyList:this.data.historyList
  })
  },

wx.navigateTo

を使用して、詳細ページへのジャンプ、文字列テンプレートの追加、IDの値の決定、データを使用してページを駆動し、異なるデータを持つ同じページにジャンプします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>wx.navigateTo({ url: `../hotsearch/hotsearch?id=`+id })</pre><div class="contentsignin">ログイン後にコピー</div></div>

最後に、データを更新する必要があります

     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- x="true"

ナビゲーション バーを水平方向にスライドさせます scroll-with-animation="true" スライドをアニメーションさせます。 scroll-into-view="{{scrollTop }}"<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> &lt;scroll-view scroll-x=&quot;true&quot; scroll-with-animation=&quot;true&quot; style=&quot;width:100%;&quot; class=&quot;scroll-view_H &quot; scroll-into-view=&quot;{{scrollTop}}&quot;&gt; &lt;view wx:for=&quot;{{goodsNav}}&quot; wx:key=&quot;index&quot; id=&quot;{{item.id}}&quot; data-index=&quot;{{index}}&quot; data-type=&quot;{{item.type}}&quot; bindtap=&quot;changegoods&quot; class=&quot;scroll-view-item_H {{activeNavIndex == index?&amp;#39;active&amp;#39;: &amp;#39;&amp;#39;}} &quot; &gt; &lt;text&gt;{{item.text}}&lt;/text&gt; &lt;/view&gt; &lt;/scroll-view&gt; &lt;/view&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>これはナビゲーション バーにバインドされたイベントです

let {index, type} = e.currentTarget.dataset ;

インデックスとタイプを抽出して設定します。カウントは最初のいくつかとして使用され、その後 id に結合され、id の値が # に渡されます。 ##scrollTop、ナビゲーション バーが scrollTop# にジャンプします ##この値、この値は中央にあります<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> console.log(e); let {index, type} = e.currentTarget.dataset; console.log(&quot;index=&quot; +index, &quot;type=&quot;+type); this.setData({ activeNavIndex:index }) if (type == &amp;#39;recommend&amp;#39;) { this.setData({ goodsList: this.data.recommend }) } else { let goods = this.data.recommend.filter((good) =&gt; good.camptype == type ) this.setData({ goodsList: goods }) //console.log(this.data.goods) } var index1 = e.currentTarget.dataset.index; var count = 2; var id = &quot;item&quot;+(index1-count);//拼接id if(count == 2 &amp;&amp; index1 &lt; 3 || count == 3 &amp;&amp; index1 &lt; 2 || count == 4 &amp;&amp; index1 &lt; 3){ id = &quot;item0&quot;; } console.log(&quot;下标&quot;,index1,&quot;---分类id名称&quot;,id) this.setData({ scrollTop: id }) },</pre><div class="contentsignin">ログイン後にコピー</div></div>wxss を追加すると効果が得られます ただし、このように書くと問題があり、表示内容が6などの偶数の場合、正しく真ん中にジャンプできず、3の位置にジャンプしてしまい、若干のズレが生じます。 . この問題はまだ解決していませんが、解決方法を知っている人はいますか？ <code>#ソース コード #ここにプロジェクトの完全なソース コードがあります。コードの一部は上に示しています。興味がある場合は、完全なソース コードを確認してください

https: //gitee.com/xinccc/fullstack_huoshan/tree/master/wxapp/dewu

まとめ

少し完成度の高いプロジェクトを書くのは初めてです。ここでは、開発プロセスで遭遇した主な困難を主に紹介します。全体的に困難な点はありませんが、それは意味します。このような経験をしたことで、自分にはまだまだ学ぶことがたくさんあると実感しました。また、困ったときに助けてくれた先生やクラスメートにも感謝しています。この記事が届いたと感じたらぜひ、「いいね！」をしていただければ大変励みになります。アドバイスがございましたら、コメント欄で一緒に議論し、学んでいただければ幸いです。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がミニプログラムに検索機能を実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。