Wie implementiert man allgemeine Suchfunktionen in Miniprogrammen? Der folgende Artikel führt Sie Schritt für Schritt durch die Implementierung der Suchfunktion im Miniprogramm. Ich hoffe, er ist hilfreich für Sie!

Beim Entwickeln jedes kleinen Programms wird es grunds?tzlich mit einer Suchfunktion ausgestattet. Nach einer Zeit des Studiums habe ich eine umfassendere Suche gelernt Schauen Sie sich die Rahmenfunktion an!

Entwicklungsvorbereitung

• WeChat-Applet
• Wie eine Vant-Komponentenbibliothek

Effektanzeige

Werfen wir zun?chst einen Blick auf den Effekt

Vorl?ufig Vorbereitung

Importieren einiger verwendeter Cloud-Datenbankdaten Testen Sie die Suchfeldfunktion

Implementierung

Erstellen Sie drei neue Seiten unter dem Verzeichnis.

Index wird als erste Seite des Suchfelds verwendet. Suchen Sie nach der Seite, die für bestimmte Suchanfragen verwendet wird

Hotsearch ist eine detaillierte Seite mit Suchinhalten. Schauen wir uns zun?chst das Layout des Index auf der ersten Seite des Suchfelds an. Hier stellen wir haupts?chlich den Inhalt des Suchfelds vor Das Folgende wird hier nicht beschrieben.

Dies ist der index.wxml-Code

      <view class="search_1" bindtap="gotoSearch">
          <van-search 
          placeholder="搜索單品" disabled
          />
        </view>
      <view class="search_2">
        <view class="pic" bindtap="list" >
          <image ></image>
        </view>
      </view>
    </view>

Dies ist der search.wxml-Code des Suchfelds

  <view class="dewu-search">
    <view class="return" >
      <view class="return_pic" bindtap="gotoindex">
        <image ></image>
      </view>
      <view class="txt">搜索</view>
    </view>
  </view>
  <van-search 
      value="{{value}}" 
      show-action 
      placeholder="輸入商品名稱(chēng)、貨號(hào)"
      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">熱門(mén)搜索</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 muss eingeführt werden

rrree

Um sicherzustellen, dass relevante Inhalte angezeigt werden, wenn im Eingabefeld Inhalte eingegeben werden, wird die ausgeblendete Seite angezeigt hidden="{{ issuggest==false?'hidden':''}}", um festzustellen, ob dies erforderlich ist. Verwandte Inhaltsseiten werden angezeigt. Verwenden Sie indexOf, um festzustellen, ob e.detail (Inhalt des Eingabefelds) in der Cloud-Datenbank vorhanden ist. Wenn vorhanden, speichern Sie diese Daten in einem Array und verbinden Sie die zuvor gesuchten Daten Array, verwenden Sie dann wx.setStorageSync();, um die Daten im Eingabefeld im Speicher zu speichern, und verwenden Sie dann wx.getStorageSync(), um die Daten zu extrahieren.

Dies ist die Detailseite, die angezeigt wird, wenn Daten im Eingabefeld vorhanden sind. Klicken Sie hier, um zur Produktdetailseite zu springen

Das ist die Logik des Suchfelds

    const db = wx.cloud.database();
    const dewuCollection = db.collection('dewu');

hidden="{{issuggest==false?'hidden':''}}"來(lái)判斷是否要出現(xiàn)相關(guān)內(nèi)容頁(yè)面， 用indexOf判斷e.detail（輸入框內(nèi)容）是否是在云數(shù)據(jù)庫(kù)里存在的，如果是存在的，那么將這條數(shù)據(jù)存入一個(gè)數(shù)組里面，并且連接之前搜索后的數(shù)組，再使用 wx.setStorageSync();將輸入框的數(shù)據(jù)存入到storage里面，然后再wx.getStorageSync()提取數(shù)據(jù)。

這是當(dāng)輸入框有數(shù)據(jù)的時(shí)候就會(huì)彈出詳情頁(yè)面，點(diǎn)擊可以跳轉(zhuǎn)到商品的詳情頁(yè)

這是搜索框的邏輯

    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;要存進(jìn)去的數(shù)據(jù)&#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可以用來(lái)跳轉(zhuǎn)到詳細(xì)的頁(yè)面，加上字符串模板，判斷id的值，用數(shù)據(jù)來(lái)驅(qū)動(dòng)頁(yè)面，跳轉(zhuǎn)到相同的頁(yè)面不同的數(shù)據(jù)。

wx.navigateTo({
      url: `../hotsearch/hotsearch?id=`+id
    })

最后還要更新數(shù)據(jù)

     wx.showLoading({
       title: '數(shù)據(jù)加載中...',
     })   
     setTimeout(()=>{
      wx.hideLoading()
       this.setData({
          goodsNav: nav,
          goodsList:List,
          recommend:List,
          goods2:this.data.historyList
       })
      },1000)
// console.log(goodsList,'===========');
   },

注意不要忘記要在全局json或者局部頁(yè)面json里引入需要使用的組件的地址

    "usingComponents": {
        "van-search":"./miniprogram_npm/@vant/weapp/search/index"
  },

擴(kuò)展

這個(gè)自動(dòng)跳轉(zhuǎn)到導(dǎo)航欄中間的功能也是挺常用的

這是wxml代碼 最主要的是 scroll-x="true" 讓導(dǎo)航欄在水平方向可以滑動(dòng)scroll-with-animation="true"是讓滑動(dòng)產(chǎn)生動(dòng)畫(huà)，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?&#39;active&#39;: &#39;&#39;}}  "
        >
          <text>{{item.text}}</text>
        </view>
      </scroll-view>
    </view>

這是綁定在導(dǎo)航欄上面的事件 let {index, type} = e.currentTarget.dataset;提取到 index 和 type ，然后設(shè)置一個(gè)count作為前幾個(gè)不動(dòng)，然后拼接給id，把id的值傳給scrollTop，讓導(dǎo)航欄跳到scrollTopwx.navigateTo kann zum Springen verwendet werden Zu detaillierten Seiten hinzufügen, eine Zeichenfolgenvorlage hinzufügen, den Wert der ID bestimmen, Daten zum Steuern der Seite verwenden und mit unterschiedlichen Daten zur gleichen Seite springen.

     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("下標(biāo)",index1,"---分類(lèi)id名稱(chēng)",id)
      this.setData({
        scrollTop: id
      })
    },

Abschlie?end müssen die Daten aktualisiert werden

rrreee

Achten Sie darauf, nicht zu vergessen, die Adresse der Komponente einzugeben, die Sie im globalen JSON oder lokalen Seiten-JSON verwenden müssen

rrreee

extend

this Die Funktion, automatisch in die Mitte der Navigationsleiste zu springen, ist ebenfalls sehr verbreitet

??????Dies ist der WXML-Code. Das Wichtigste ist scroll-x="true" damit Die Navigationsleiste kann in horizontaler Richtung verschoben werden. scroll-with-animation ="true" soll das Gleiten animieren, scroll-into-view="{{scrollTop}}"??rrreee??Dies ist ein Ereignis, das an die Navigationsleiste gebunden ist let {index, type} = e.currentTarget.dataset;Index und Typ extrahieren, dann eine Anzahl als die ersten paar festlegen und sie dann zusammenfügen zu id und geben Sie ein. übergeben Sie den Wert von id an scrollTop und lassen Sie die Navigationsleiste zum Wert von scrollTop springen. code>. Dieser Wert liegt in der Mitte??rrreee??Auf diese Weise k?nnen Sie wxss hinzufügen, um den Effekt zu erzielen Bei dieser Schreibweise gibt es jedoch ein Problem: Wenn der angezeigte Inhalt eine gerade Zahl ist, z. B. 6, kann er nicht korrekt in die Mitte springen und springt an die Position 3, was zu einer leichten Abweichung führt Ich habe dieses Problem noch nicht gel?st. Ich frage mich, ob jemand wei?, wie man das l?st. ????Quellcode????Hier ist der vollst?ndige Quellcode des Projekts oben angegeben. Wenn Sie interessiert sind, k?nnen Sie sich den vollst?ndigen Quellcode ansehen??????https://gitee.com/xinccc/. fullstack_huoshan/tree/master/ wxapp/dewu??

Zusammenfassung

Hier schreibe ich haupts?chlich die Hauptschwierigkeiten, auf die ich w?hrend des Entwicklungsprozesses gesto?en bin, aber es bedeutet mir trotzdem viel Durch diese Erfahrung habe ich festgestellt, dass ich noch viel lernen muss. Ich bin auch den Lehrern und Klassenkameraden dankbar, die mir geholfen haben, als ich Schwierigkeiten hatte. Wenn Sie das Gefühl haben, dass dieser Artikel Ihren Punkt erreicht hat, k?nnen Sie ihn auch geben Geben Sie mir ein ?Gef?llt mir“, was für mich eine gro?e Ermutigung ist. Ich hoffe, dass wir im Kommentarbereich gemeinsam darüber diskutieren und lernen k?nnen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine ausführliche Erkl?rung zur Implementierung von Suchfunktionen in Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!