Amalan reka bentuk dan pembangunan UniApp untuk merealisasikan halaman carian dan halaman penapis

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js Ia boleh digunakan untuk membangunkan aplikasi yang berjalan pada berbilang platform pada masa yang sama dengan mudah. Dalam proses pembangunan sebenar, fungsi carian dan fungsi penapisan adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara mereka bentuk dan membangunkan halaman carian dan menapis halaman dalam UniApp, dan melampirkan contoh kod.

1. Reka bentuk halaman carian
Halaman carian biasanya terdiri daripada kotak carian dan senarai hasil carian. Pengguna memasukkan kata kunci dalam kotak carian, dan program menapis hasil yang berkaitan daripada sumber data berdasarkan kata kunci dan memaparkannya dalam senarai hasil carian.

Di UniApp, kami boleh menggunakan komponen untuk melaksanakan reka bentuk halaman carian. Pertama, dalam bahagian templat halaman, kita perlu mengisytiharkan struktur reka letak kotak carian dan senarai hasil carian. Kod sampel adalah seperti berikut:

d477f9ce7bf77f53fbcf36bec1b69b7a
661f23f3f62b88de99ee859876b2524e

<input type="text" placeholder="请输入关键字" v-model="keyword" @input="search" />
<view class="result" v-if="searchResult.length">
  <view class="item" v-for="(item, index) in searchResult" :key="index">
    {{ item.title }}
  </view>
</view>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

Dalam kod sampel di atas, kami menggunakan input kotak (input) untuk melaksanakan kotak carian, dan gunakan arahan model v untuk mengikat nilai kotak input kepada kata kunci (kata kunci) Apabila pengguna memasukkan kata kunci, peristiwa @input akan dicetuskan untuk memanggil kaedah carian untuk mencari. Hasil carian menggunakan arahan v-jika untuk mengawal sama ada untuk memaparkannya Jika hasil carian tidak kosong, arahan v-untuk digunakan untuk memaparkan setiap hasil dalam komponen paparan.

Seterusnya, dalam bahagian skrip halaman, kita perlu menentukan data kata kunci dan hasil carian, dan melaksanakan kaedah carian untuk carian. Kod sampel adalah seperti berikut:

855348821b2e8f2cc4b633bf98f064df
eksport lalai {

data() {
  return {
    keyword: "",
    searchResult: []
  };
},
methods: {
  search() {
    // 根据关键字从数据源中筛选出相关的结果
    this.searchResult = this.dataSource.filter(item => {
      return item.title.includes(this.keyword);
    });
  }
}

};
2cacc6d41bbb37262a98f745aa00fbf0

Dalam kod sampel di atas, kami menggunakan atribut data untuk menentukan data kata kunci dan hasil carian , pada mulanya Nilai masing-masing adalah rentetan kosong dan tatasusunan kosong. Dalam kaedah carian, kami menggunakan kaedah penapis untuk menapis sumber data dan mengembalikan hasil yang mengandungi kata kunci kepada SearchResult.

2. Reka bentuk halaman penapis
Halaman penapis biasanya terdiri daripada syarat penapis dan senarai hasil penapis. Pengguna memilih syarat penapisan dan program menapis hasil yang layak daripada sumber data berdasarkan syarat dan memaparkannya dalam senarai hasil penapisan.

Di UniApp, kami boleh menggunakan komponen untuk mereka bentuk halaman penapis. Pertama, dalam bahagian templat halaman, kita perlu mengisytiharkan syarat penapis dan struktur susun atur senarai hasil penapis. Kod sampel adalah seperti berikut:

d477f9ce7bf77f53fbcf36bec1b69b7a
661f23f3f62b88de99ee859876b2524e

<view class="filters">
  <view class="filter" v-for="(filter, index) in filters" :key="index">
    <text>{{ filter.title }}</text>
    <view class="options">
      <view class="option" v-for="(option, optionIndex) in filter.options" :key="optionIndex" @tap="selectFilterOption(filter, option)">
        <text>{{ option }}</text>
      </view>
    </view>
  </view>
</view>
<view class="result" v-if="filterResult.length">
  <view class="item" v-for="(item, index) in filterResult" :key="index">
    {{ item.title }}
  </view>
</view>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

Dalam kod sampel di atas, kami menggunakan dua paparan Komponen mewakili keadaan penapis dan senarai hasil penapis masing-masing. Untuk keadaan penapis, kami menggunakan arahan gelung v-for untuk melintasi tatasusunan penapis, dan menggunakan arahan gelung bersarang v-for untuk melintasi pilihan setiap keadaan penapis. Untuk menapis senarai hasil, gunakan arahan v-jika untuk mengawal sama ada untuk memaparkannya, dan gunakan arahan v-untuk untuk memaparkan setiap hasil dalam komponen paparan.

Langkah seterusnya, dalam bahagian skrip halaman, kita perlu menentukan syarat penapis, hasil penapis dan kaedah penapis. Kod sampel adalah seperti berikut:

855348821b2e8f2cc4b633bf98f064df
eksport lalai {

data() {
  return {
    filters: [
      {
        title: "类型",
        options: ["选项1", "选项2", "选项3"]
      },
      {
        title: "价格",
        options: ["选项4", "选项5", "选项6"]
      }
    ],
    selectedFilters: [],
    filterResult: []
  };
},
methods: {
  selectFilterOption(filter, option) {
    if (this.selectedFilters.includes(option)) {
      this.selectedFilters.splice(this.selectedFilters.indexOf(option), 1);
    } else {
      this.selectedFilters.push(option);
    }

    this.filterResult = this.dataSource.filter(item => {
      return this.selectedFilters.every(filterOption => {
        return item.options.includes(filterOption);
      });
    });
  }
}

};
2cacc6d41bbb37262a98f745aa00fbf0

Dalam kod sampel di atas, kami menggunakan atribut data untuk mentakrifkan keadaan penapis, hasil penapisan dan keadaan penapis yang dipilih. Nilai awal ialah satu set keadaan penapis penapis, tatasusunan kosong yang dipilihPenapis dan hasil penapis tatasusunan kosong. Dalam kaedah selectFilterOption, kami melaksanakan pemilihan dan nyahpilihan keadaan penapis, dan menapis sumber data mengikut keadaan penapis yang dipilih.

3. Ringkasan
Artikel ini memperkenalkan kaedah mereka bentuk dan membangunkan halaman carian dan halaman penapis dalam UniApp, dan melampirkan contoh kod yang sepadan. Melalui penggunaan komponen, kami boleh melaksanakan fungsi carian dan penapis dengan mudah, membolehkan pengguna mencari dengan cepat apa yang mereka perlukan. Saya harap artikel ini dapat membantu pembangun UniApp.

Atas ialah kandungan terperinci Amalan reka bentuk dan pembangunan UniApp untuk merealisasikan halaman carian dan halaman penapis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!