Penjelasan mendalam tentang cara melaksanakan fungsi carian dalam program mini

Bagaimana untuk melaksanakan fungsi carian biasa program mini? Artikel berikut akan membawa anda langkah demi langkah untuk memahami kaedah melaksanakan fungsi carian dalam program mini Saya harap ia akan membantu anda!

Dalam proses pembangunan setiap program kecil, ia pada asasnya dilengkapi dengan fungsi carian Jadi bagaimanakah fungsi carian yang agak pintar itu dilaksanakan? belajar, saya telah mempelajari fungsi kotak carian yang agak komprehensif. Mari kita lihat!

Persediaan pembangunan

• WeChat applet
• Anda suka perpustakaan komponen vant

Paparan kesan

Mari kita lihat kesannya dahulu

Persediaan awal

Import beberapa data ke dalam pangkalan data awan untuk menguji fungsi Bingkai carian

dilaksanakan

Cipta tiga halaman baharu di bawah direktori

indeks digunakan sebagai Halaman pertama kotak carian

carian ialah halaman yang digunakan untuk carian tertentu

hotsearch ialah halaman terperinci bagi kandungan carian

Pertama sekali, mari kita lihat reka letak indeks pada halaman pertama kotak carian Di sini kami memperkenalkan kandungan kotak carian yang lain di bawah tidak akan diterangkan di sini.

Ini ialah kod 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>

Ini ialah carian Kod .wxml kotak carian

  <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 mesti diperkenalkan dahulu Data dalam pangkalan data awan

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

Untuk muncul kandungan yang berkaitan apabila kotak input berubah, dua halaman diperlukan . Apabila terdapat input kandungan dalam kotak input, halaman tersembunyi dipaparkanhidden="{{issuggest==false?'hidden':''}}"Untuk menentukan sama ada halaman kandungan yang berkaitan harus muncul, Gunakan indexOf untuk menentukan sama ada e.detail (kandungan kotak input) wujud dalam pangkalan data awan Jika ia wujud, kemudian simpan data ini dalam tatasusunan dan sambung tatasusunan yang dicari sebelum ini, kemudian gunakan wx.setStorageSync();Simpan. data dalam kotak input ke dalam storan, dan kemudian wx.getStorageSync() mengekstrak data.

Ini ialah halaman butiran yang akan muncul apabila terdapat data dalam kotak input Klik untuk melompat ke halaman butiran produk

Ini adalah. kotak carian Logik

    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 boleh digunakan untuk melompat ke halaman terperinci, menambah templat rentetan, menentukan nilai id, menggunakan data untuk memacu halaman, lompat Pergi ke halaman yang sama dengan data yang berbeza.

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

Akhir sekali, data perlu dikemas kini

     wx.showLoading({
       title: '数据加载中...',
     })   
     setTimeout(()=>{
      wx.hideLoading()
       this.setData({
          goodsNav: nav,
          goodsList:List,
          recommend:List,
          goods2:this.data.historyList
       })
      },1000)
// console.log(goodsList,'===========');
   },

Berhati-hati jangan lupa untuk memperkenalkan alamat komponen yang perlu anda gunakan dalam json global atau halaman tempatan json

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

Sambungan

Fungsi melompat secara automatik ke tengah bar navigasi ini juga sangat biasa

Ini adalah perkara paling penting tentang kod wxml Ya scroll-x="true" membolehkan bar navigasi meluncur dalam arah mendatar scroll-with-animation="true" membolehkan gelongsor bernyawa 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>

Ini peristiwa yang terikat pada bar navigasi let {index, type} = e.currentTarget.dataset; diekstrak untuk mengindeks dan menaip, kemudian tetapkan kiraan sebagai beberapa yang pertama, kemudian sambungkannya kepada id, hantarkan nilai id kepada scrollTop dan biarkan bar navigasi melompat ke nilai scrollTop, iaitu nilai di tengah

     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
      })
    },

Dengan cara ini, kesannya boleh dicapai dengan menambah wxss Walau bagaimanapun, terdapat masalah dengan menulis seperti ini, iaitu, apabila kandungan yang dipaparkan adalah nombor genap, seperti 6, ia tidak boleh melompat ke tengah dengan betul, dan akan melompat ke kedudukan 3, yang akan menyebabkan sedikit penyelewengan. . Saya masih belum menyelesaikan masalah ini, saya tertanya-tanya adakah sesiapa tahu bagaimana untuk menyelesaikan masalah ini?

Kod sumber

Berikut ialah kod sumber lengkap projek tersebut. Jika anda berminat, anda boleh menyemak kod sumber yang lengkap

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

Ringkasan

Ini adalah kali pertama saya menulis projek yang sedikit lengkap Di sini saya memperkenalkan kesukaran utama yang saya hadapi semasa proses pembangunan, Ini bermakna a banyak kepada saya. Pengalaman sebegitu menyedarkan saya bahawa masih banyak yang perlu saya pelajari. Saya juga berterima kasih kepada guru-guru dan rakan-rakan sekelas yang membantu saya ketika saya mengalami kesulitan Jika anda rasa artikel ini sampai kepada anda titik, anda mungkin juga memberi saya suka, yang akan menjadi galakan yang besar kepada saya Jika anda mempunyai sebarang nasihat, saya harap kita boleh berbincang dan belajar bersama di ruangan komen.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Penjelasan mendalam tentang cara melaksanakan fungsi carian dalam program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!