Comment implémenter des fonctions de recherche communes dans les mini-programmes ? L'article suivant vous guidera étape par étape pour comprendre la méthode d'implémentation de la fonction de recherche dans le mini programme. J'espère qu'il vous sera utile !

Dans le processus de développement de chaque petit programme, il sera essentiellement équipé d'une fonction de recherche. Alors, comment la fonction de recherche relativement intelligente est-elle mise en ?uvre ? Après une période d'études, j'ai appris une recherche relativement complète. jetez un oeil à la fonction frame!

Préparation au développement

• Applet WeChat
• Comme la bibliothèque de composants vant

Affichage des effets

Jetons d'abord un coup d'oeil à l'effet

Préliminaire préparation

Importer certaines données de bases de données cloud utilisées Testez la fonction du champ de recherche

implémentation

Créez trois nouvelles pages sous le répertoire

l'index est utilisé comme première page du champ de recherche

Recherchez la page utilisée pour des recherches spécifiques

hotsearch est une page détaillée du contenu de la recherche

Tout d'abord, jetons un coup d'?il à la disposition de l'index sur la première page du champ de recherche. Ici, nous présentons principalement le contenu du champ de recherche. ci-dessous ne sera pas décrit ici.

C'est le code 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>

C'est le code search.wxml du champ de recherche

  <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="輸入商品名稱、貨號"
      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 Tout d'abord, les données dans la base de données cloud. doit être introduit

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

Pour s'assurer que lorsque la zone de saisie change, le contenu pertinent appara?tra. Lorsqu'il y a une saisie de contenu dans la zone de saisie, la page masquée s'affiche hidden="{{. issuggest==false?'hidden':''}}" pour déterminer si cela est nécessaire. Des pages de contenu associées apparaissent. Utilisez indexOf pour déterminer si e.detail (contenu de la zone de saisie) existe dans la base de données cloud. S'il existe, stockez ces données dans un tableau et connectez les données précédemment recherchées. tableau, puis utilisez wx.setStorageSync(); pour stocker les données dans la zone de saisie dans le stockage, puis wx.getStorageSync() pour extraire les données. hidden="{{issuggest==false?'hidden':''}}"來判斷是否要出現(xiàn)相關(guān)內(nèi)容頁面， 用indexOf判斷e.detail（輸入框內(nèi)容）是否是在云數(shù)據(jù)庫里存在的，如果是存在的，那么將這條數(shù)據(jù)存入一個數(shù)組里面，并且連接之前搜索后的數(shù)組，再使用 wx.setStorageSync();將輸入框的數(shù)據(jù)存入到storage里面，然后再wx.getStorageSync()提取數(shù)據(jù)。

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

這是搜索框的邏輯

    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;要存進去的數(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可以用來跳轉(zhuǎn)到詳細的頁面，加上字符串模板，判斷id的值，用數(shù)據(jù)來驅(qū)動頁面，跳轉(zhuǎn)到相同的頁面不同的數(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或者局部頁面json里引入需要使用的組件的地址

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

擴展

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

這是wxml代碼 最主要的是 scroll-x="true" 讓導(dǎo)航欄在水平方向可以滑動scroll-with-animation="true"是讓滑動產(chǎn)生動畫，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è)置一個count作為前幾個不動，然后拼接給id，把id的值傳給scrollTop，讓導(dǎo)航欄跳到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
      })
    },

wx.navigateTo peut être utilisé pour sauter aux pages détaillées, ajoutez un modèle de cha?ne, déterminez la valeur de l'identifiant, utilisez les données pour piloter la page et accédez à la même page avec des données différentes.

rrreee????Enfin, les données doivent être mises à jour????rrreee??Attention à ne pas oublier d'introduire l'adresse du composant que vous devez utiliser dans la page globale json ou locale json??rrreee

étendre????this La fonction de saut automatique au milieu de la barre de navigation est également très courante????????Voici le code wxml. Le plus important est scroll-x="true" pour que la barre de navigation peut glisser dans le sens horizontal scroll-with-animation ="true" sert à animer le glissement, scroll-into-view="{{scrollTop}}"??rrreee??Il s'agit d'un événement lié à la barre de navigation let {index, type} = e.currentTarget.dataset;Extraire l'index et le type, puis définir un nombre comme premier, puis le coller à id, et mettez Passez la valeur de id à scrollTop, et laissez la barre de navigation passer à la valeur de scrollTop code>. Cette valeur est au milieu??rrreee??De cette fa?on, vous pouvez ajouter wxss. L'effet est obtenu. Cependant, il y a un problème avec une telle écriture, c'est-à-dire que lorsque le contenu affiché est un nombre pair, tel que 6, il ne peut pas sauter correctement au milieu et passera à la position 3, ce qui entra?nera une légère déviation. .Je n'ai pas encore résolu ce problème, je me demande si quelqu'un sait comment résoudre ce problème ? ????Code source????Voici le code source complet du projet. Une partie du code est donnée ci-dessus. Si vous êtes intéressé, vous pouvez consulter le code source complet??????https://gitee.com/xinccc/. fullstack_huoshan/tree/master/ wxapp/dewu??

Résumé

C'est la première fois que j'écris un projet un peu complet. Ici, je présente principalement les principales difficultés que j'ai rencontrées lors du processus de développement. Même s'il n'y a pas de difficultés en général, cela compte quand même beaucoup pour moi. une telle expérience, j'ai découvert que j'ai encore beaucoup à apprendre. Je suis également reconnaissant envers les professeurs et les camarades de classe qui m'ont aidé à me guider lorsque j'avais des difficultés. Si vous sentez que cet article a atteint votre point, autant le donner. moi un like, ce qui sera un grand encouragement pour moi. Si vous avez des conseils, j'espère que nous pourrons discuter et apprendre ensemble dans la zone de commentaires.

Pour plus de connaissances sur la programmation, veuillez visiter?: Introduction à la programmation?! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!