検索ページとフィルターページを実装するためのUniAppの設計と開発の実践

UniApp は、Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、複数のプラットフォームで同時に実行するアプリケーションを簡単に開発するために使用できます。実際の開発プロセスでは、検索機能やフィルタリング機能は非常に一般的な要件です。この記事では、UniApp で検索ページとフィルター ページを設計および開発する方法を紹介し、コード例を添付します。

1. 検索ページをデザインする
検索ページは通常、検索ボックスと検索結果リストで構成されます。ユーザーが検索ボックスにキーワードを入力すると、プログラムはキーワードに基づいてデータ ソースから関連する結果をフィルター処理して、検索結果リストに表示します。

UniApp では、コンポーネントを使用して検索ページのデザインを実装できます。まず、ページのテンプレート部分で、検索ボックスと検索結果リストのレイアウト構造を宣言する必要があります。サンプル コードは次のとおりです。

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

上記のサンプル コードでは、入力ボックス (input) コンポーネントを使用して検索ボックスを実装し、v-model ディレクティブを使用して入力ボックスの値をキーワード (keyword) にバインドします。ユーザーがキーワードを入力 @input イベントがトリガーされると、検索メソッドが呼び出されて検索されます。検索結果は、v-if ディレクティブを使用して表示するかどうかを制御します。検索結果が空でない場合は、v-for ディレクティブを使用して各結果をビュー コンポーネントに表示します。

次に、ページのスクリプト部分で、キーワードと検索結果データを定義し、検索のための検索メソッドを実装する必要があります。サンプル コードは次のとおりです。

3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {

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

};
2cacc6d41bbb37262a98f745aa00fbf0

上記のサンプルではコードでは、キーワードと検索結果のデータを定義するために data 属性を使用し、初期値はそれぞれ空の文字列と空の配列です。 search メソッドでは、filter メソッドを使用してデータ ソースをフィルターし、キーワードを含む結果を searchResult に返します。

2. フィルタリング ページの設計
フィルタリング ページは通常、フィルタリング条件とフィルタリング結果のリストで構成されます。ユーザーがフィルタリング条件を選択すると、プログラムはその条件に基づいてデータ ソースから適格な結果をフィルタリングし、フィルタリング結果リストに表示します。

UniApp では、コンポーネントを使用してフィルター ページのデザインを実装できます。まず、ページのテンプレート部分で、フィルター条件とフィルター結果リストのレイアウト構造を宣言する必要があります。サンプル コードは次のとおりです。

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

上記のサンプル コードでは、2 つのビュー コンポーネントを使用して、それぞれフィルター条件とフィルター結果リストを表します。フィルター条件の場合、ループ命令 v-for を使用してフィルター配列を走査し、ネストされたループ命令 v-for を使用して各フィルター条件のオプションを走査します。結果リストをフィルタリングするには、v-if ディレクティブを使用して結果リストを表示するかどうかを制御し、v-for ディレクティブを使用して各結果をビュー コンポーネントに表示します。

次のステップでは、ページのスクリプト部分で、フィルター条件、フィルター結果、フィルター メソッドを定義する必要があります。サンプル コードは次のとおりです。

3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {

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

上記のサンプルではコードでは、data 属性を使用してフィルター条件、フィルター結果、および選択したフィルター条件を定義します。初期値はフィルター条件のセット、空の配列 selectedFilters と空の配列 filterResult です。 selectFilterOption メソッドでは、フィルタ条件の選択と選択解除を実装し、選択したフィルタ条件に従ってデータ ソースをフィルタリングします。

3. 概要
この記事では、UniApp で検索ページとフィルター ページを設計および開発する方法を紹介し、対応するコード例を添付します。コンポーネントを使用すると、検索機能やフィルター機能を簡単に実装できるため、ユーザーは必要なものをすぐに見つけることができます。この記事が UniApp 開発者にとって役立つことを願っています。

以上が検索ページとフィルターページを実装するためのUniAppの設計と開発の実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。