Design- und Entwicklungspraxis von UniApp zur Implementierung einer Suchseite und einer Filterseite

UniApp ist ein plattformübergreifendes Entwicklungsframework, das auf Vue.js basiert und zur einfachen Entwicklung von Anwendungen verwendet werden kann, die auf mehreren Plattformen gleichzeitig ausgeführt werden. Im eigentlichen Entwicklungsprozess sind Suchfunktionen und Filterfunktionen sehr häufige Anforderungen. In diesem Artikel wird das Entwerfen und Entwickeln von Suchseiten und Filterseiten in UniApp vorgestellt und Codebeispiele angehängt.

1. Gestalten Sie die Suchseite
Die Suchseite besteht normalerweise aus einem Suchfeld und einer Suchergebnisliste. Der Benutzer gibt Schlüsselwörter in das Suchfeld ein und das Programm filtert anhand der Schlüsselwörter relevante Ergebnisse aus der Datenquelle heraus und zeigt sie in der Suchergebnisliste an.

In UniApp können wir Komponenten verwenden, um die Suchseite zu gestalten. Zuerst müssen wir im Vorlagenteil der Seite die Layoutstruktur des Suchfelds und der Suchergebnisliste deklarieren. Der Beispielcode lautet wie folgt:

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

Im obigen Beispielcode verwenden wir eine Eingabe box (Eingabe)-Komponente zum Implementieren des Suchfelds und verwenden Sie die V-Model-Direktive, um den Wert des Eingabefelds an das Schlüsselwort (Schlüsselwort) zu binden. Wenn der Benutzer das Schlüsselwort eingibt, wird das @input-Ereignis ausgelöst, um das aufzurufen Suchmethode zum Suchen. Die Suchergebnisse verwenden die v-if-Direktive, um zu steuern, ob sie angezeigt werden. Wenn die Suchergebnisse nicht leer sind, wird die v-for-Direktive verwendet, um jedes Ergebnis in einer Ansichtskomponente anzuzeigen.

Als nächstes müssen wir im Skriptteil der Seite die Daten von Schlüsselwörtern und Suchergebnissen definieren und die Suchmethode für die Suche implementieren. Der Beispielcode lautet wie folgt:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

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

};
2cacc6d41bbb37262a98f745aa00fbf0

Im obigen Beispielcode verwenden wir das Datenattribut, um die Daten von Schlüsselwörtern und Suchergebnissen zu definieren , anfänglich Die Werte sind jeweils eine leere Zeichenfolge und ein leeres Array. In der Suchmethode verwenden wir die Filtermethode, um die Datenquelle zu filtern und die Ergebnisse mit Schlüsselwörtern an searchResult zurückzugeben.

2. Entwerfen Sie die Filterseite
Die Filterseite besteht normalerweise aus Filterbedingungen und einer Filterergebnisliste. Durch die Auswahl von Filterbedingungen filtert das Programm anhand der Bedingungen qualifizierte Ergebnisse aus der Datenquelle heraus und zeigt sie in der Filterergebnisliste an.

In UniApp können wir Komponenten verwenden, um Filterseiten zu entwerfen. Zunächst müssen wir im Vorlagenteil der Seite die Filterbedingungen und die Layoutstruktur der Filterergebnisliste deklarieren. Der Beispielcode lautet wie folgt:

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

Im obigen Beispielcode haben wir zwei Ansichten verwendet Komponenten repräsentieren Filterbedingungen bzw. Filterergebnislisten. Für die Filterbedingungen verwenden wir eine Schleifenanweisung v-for, um das Filterarray zu durchlaufen, und eine verschachtelte Schleifenanweisung v-for, um die Optionen jeder Filterbedingung zu durchlaufen. Verwenden Sie zum Filtern der Ergebnisliste die v-if-Direktive, um zu steuern, ob sie angezeigt werden soll, und verwenden Sie die v-for-Direktive, um jedes Ergebnis in einer Ansichtskomponente anzuzeigen.

Im nächsten Schritt müssen wir im Skriptabschnitt der Seite Filterbedingungen, Filterergebnisse und Filtermethoden definieren. Der Beispielcode lautet wie folgt:

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

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

Im obigen Beispielcode verwenden wir das Datenattribut, um die Filterbedingungen, Filterergebnisse und zu definieren ausgewählte Filterbedingung. Die Anfangswerte sind eine Reihe von Filterbedingungen, ein leeres Array selectedFilters und ein leeres Array filterResult. In der Methode selectFilterOption implementieren wir die Auswahl und Abwahl von Filterbedingungen und filtern die Datenquelle gemäß den ausgewählten Filterbedingungen.

3. Zusammenfassung
Dieser Artikel stellt die Methode zum Entwerfen und Entwickeln von Suchseiten und Filterseiten in UniApp vor und fügt entsprechende Codebeispiele bei. Durch den Einsatz von Komponenten können wir Such- und Filterfunktionen einfach implementieren, sodass Benutzer schnell finden, was sie suchen. Ich hoffe, dass dieser Artikel für UniApp-Entwickler hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonDesign- und Entwicklungspraxis von UniApp zur Implementierung einer Suchseite und einer Filterseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!