Une explication détaillée de la façon d'implémenter les fonctions de recherche dans les mini-programmes

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 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 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':''}}"来判断是否要出现相关内容页面， 用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(&#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的值，用数据来驱动页面，跳转到相同的页面不同的数据。

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?&#39;active&#39;: &#39;&#39;}}  "
        >
          <text>{{item.text}}</text>
        </view>
      </scroll-view>
    </view>

这是绑定在导航栏上面的事件 let {index, type} = e.currentTarget.dataset;提取到 index 和 type ，然后设置一个count作为前几个不动，然后拼接给id，把id的值传给scrollTop，让导航栏跳到scrollTop

Il s'agit de la page de détails qui apparaîtra lorsqu'il y aura des données dans la zone de saisie. Cliquez pour accéder à la page de détails du produit

C'est la logique du champ de recherche

     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!