Pratique de conception et de développement d'UniApp pour réaliser une page de recherche et une page de filtre

UniApp est un framework de développement multiplateforme basé sur Vue.js. Il peut être utilisé pour développer facilement des applications qui s'exécutent sur plusieurs plates-formes en même temps. Dans le processus de développement actuel, les fonctions de recherche et les fonctions de filtrage sont des exigences très courantes. Cet article expliquera comment concevoir et développer des pages de recherche et des pages de filtrage dans UniApp, et joindra des exemples de code.

1. Concevoir la page de recherche
La page de recherche se compose généralement d'un champ de recherche et d'une liste de résultats de recherche. L'utilisateur saisit des mots-clés dans la zone de recherche et le programme filtre les résultats pertinents de la source de données en fonction des mots-clés et les affiche dans la liste des résultats de recherche.

Dans UniApp, nous pouvons utiliser des composants pour implémenter la conception de la page de recherche. Tout d’abord, dans la partie modèle de la page, nous devons déclarer la structure de présentation du champ de recherche et de la liste des résultats de la recherche. L'exemple de code est le suivant :

Dans l'exemple de code ci-dessus, nous utilisons une entrée box (input) pour implémenter la zone de recherche et utilisez l'instruction v-model pour lier la valeur de la zone de saisie au mot-clé (mot-clé). Lorsque l'utilisateur entre le mot-clé, l'événement @input sera déclenché pour appeler le mot-clé. méthode de recherche pour rechercher. Les résultats de la recherche utilisent la directive v-if pour contrôler s'il faut les afficher. Si les résultats de la recherche ne sont pas vides, la directive v-for est utilisée pour afficher chaque résultat dans un composant de vue.

Ensuite, dans la partie script de la page, nous devons définir les données des mots-clés et des résultats de recherche, et implémenter la méthode de recherche pour la recherche. L'exemple de code est le suivant :

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { keyword: &quot;&quot;, searchResult: [] }; }, methods: { search() { // 根据关键字从数据源中筛选出相关的结果 this.searchResult = this.dataSource.filter(item =&gt; { return item.title.includes(this.keyword); }); } }</pre><div class="contentsignin">Copier après la connexion</div></div><p>};<br></script>

Dans l'exemple de code ci-dessus, nous utilisons l'attribut data pour définir les données des mots-clés et des résultats de recherche. , initialement Les valeurs sont respectivement une chaîne vide et un tableau vide. Dans la méthode de recherche, nous utilisons la méthode filter pour filtrer la source de données et renvoyer les résultats contenant des mots-clés à searchResult.

2. Concevoir la page de filtre
La page de filtre comprend généralement les conditions de filtre et la liste des résultats du filtre. L'utilisateur sélectionne les conditions de filtrage et le programme filtre les résultats qualifiés de la source de données en fonction des conditions et les affiche dans la liste des résultats de filtrage.

Dans UniApp, nous pouvons utiliser des composants pour concevoir des pages de filtres. Tout d’abord, dans la partie modèle de la page, nous devons déclarer les conditions de filtre et la structure de présentation de la liste des résultats du filtre. L'exemple de code est le suivant :

Dans l'exemple de code ci-dessus, nous avons utilisé deux vues Les composants représentent respectivement les conditions de filtre et les listes de résultats de filtre. Pour les conditions de filtre, nous utilisons une instruction de boucle v-for pour parcourir le tableau de filtres, et utilisons une instruction de boucle imbriquée v-for pour parcourir les options de chaque condition de filtre. Pour filtrer la liste des résultats, utilisez la directive v-if pour contrôler si elle doit être affichée, et utilisez la directive v-for pour afficher chaque résultat dans un composant de vue.

Étape suivante, dans la section script de la page, nous devons définir les conditions de filtrage, les résultats du filtrage et les méthodes de filtrage. L'exemple de code est le suivant :

<script><br> export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { filters: [ { title: &quot;类型&quot;, options: [&quot;选项1&quot;, &quot;选项2&quot;, &quot;选项3&quot;] }, { title: &quot;价格&quot;, options: [&quot;选项4&quot;, &quot;选项5&quot;, &quot;选项6&quot;] } ], 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 =&gt; { return this.selectedFilters.every(filterOption =&gt; { return item.options.includes(filterOption); }); }); } }</pre><div class="contentsignin">Copier après la connexion</div></div><p>};<br></script>

Dans l'exemple de code ci-dessus, nous utilisons l'attribut data pour définir les conditions de filtre, filtrer les résultats et condition des filtres sélectionnés. Les valeurs initiales sont un ensemble de filtres conditions de filtre, un tableau vide selectedFilters et un tableau vide filterResult. Dans la méthode selectFilterOption, nous implémentons la sélection et la désélection des conditions de filtre et filtrons la source de données en fonction des conditions de filtre sélectionnées.

3. Résumé
Cet article présente la méthode de conception et de développement de pages de recherche et de pages de filtrage dans UniApp, et joint des exemples de code correspondants. Grâce à l'utilisation de composants, nous pouvons facilement mettre en œuvre des fonctions de recherche et de filtrage, permettant aux utilisateurs de trouver rapidement ce dont ils ont besoin. J'espère que cet article pourra être utile aux développeurs UniApp.

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!