WeChat ミニ プログラムにマルチレベルのリンケージ セレクター効果を実装する

WeChat ミニ プログラムでマルチレベル リンケージ セレクター効果を実装するには、特定のコード サンプルが必要です。

WeChat ミニ プログラムの人気と発展に伴い、ますます多くの機能が追加されています。開発者は、小さなプログラムの開発スキルと実装効果に注目し始めました。その中で、マルチレベル リンケージ セレクターは、小規模なプログラムで一般的なセレクター エフェクトであり、優れたユーザー エクスペリエンスとインタラクティブな効果を提供できます。この記事では、WeChat ミニ プログラムにマルチレベル リンケージ セレクターを実装する方法と、具体的なコード例を紹介します。

ステップ 1: ページとレイアウトを作成する

まず、マルチレベル リンケージ セレクターを実装するための新しいページを作成する必要があります。 WeChat 開発者ツールで、[新しいファイル] を選択し、[ページ] を選択して、ページ名とパスを入力します。作成したページでは、セレクターのレイアウトとスタイルを定義する必要があります。

サンプル コードは次のとおりです:

<view class="container">
   <picker mode="selector" range="{{pickerData.firstArray}}" bindchange="handleFirstChange">
     <view>{{pickerData.firstArray[pickerData.firstIndex]}}</view>
   </picker>
   <picker mode="selector" range="{{pickerData.secondArray}}" bindchange="handleSecondChange">
     <view>{{pickerData.secondArray[pickerData.secondIndex]}}</view>
   </picker>
   <picker mode="selector" range="{{pickerData.thirdArray}}" bindchange="handleThirdChange">
     <view>{{pickerData.thirdArray[pickerData.thirdIndex]}}</view>
   </picker>
</view>

上記のコードでは、マルチレベル リンケージ セレクターの基礎として 3 つのピッカー コンポーネントを使用します。各ピッカー コンポーネントには、定義する範囲属性があります。オプションのデータ ソース。bindchange イベントを通じて選択変更コールバック関数をバインドします。各ピッカー コンポーネントでは、現在選択されている項目を表示するビュー コンポーネントも定義します。

ステップ 2: セレクターのデータ ソースを定義する

アプレットにマルチレベル リンケージ セレクターを実装するには、セレクターのデータ ソースを定義する必要があります。これらのデータ ソースは、インターフェイスまたはローカル データを通じて取得でき、特定の形式で編成されています。この例では、セレクターに 3 つのレベルの選択があり、セレクターの各レベルのデータ ソースがそれぞれ firstArray、secondArray、および thirdArray であると仮定します。

サンプル コードは次のとおりです。

Page({
   data: {
      pickerData: {
         firstArray: ["选项一", "选项二", "选项三"],
         secondArray: ["选项A", "选项B", "选项C"],
         thirdArray: ["选项甲", "选项乙", "选项丙"]
      },
      firstIndex: 0,
      secondIndex: 0,
      thirdIndex: 0
   },
   handleFirstChange: function(e) {
      this.setData({
         firstIndex: e.detail.value
      })
   },
   handleSecondChange: function(e) {
      this.setData({
         secondIndex: e.detail.value
      })
   },
   handleThirdChange: function(e) {
      this.setData({
         thirdIndex: e.detail.value
      })
   }
})

上記のコードでは、3 レベル セレクターのデータ ソースを含むデータ内に pickerData オブジェクトを定義します。同時に、各セレクターの現在選択されているインデックスを記録する 3 つの変数も定義しました。コールバック関数では、セレクターの選択が変更されると、setData メソッドを通じて対応するインデックス変数を更新します。

ステップ 3: セレクターのリンケージ エフェクトを処理する

最後のステップは、セレクターのリンケージ エフェクトを処理することです。マルチレベル リンケージ セレクターでは、セレクターの前のレベルの選択が変更されると、リンケージ効果を達成するために、選択された値に従って次のレベルのセレクターのデータ ソースを更新する必要があります。

サンプル コードは次のとおりです:

Page({
   data: {
      pickerData: {
         firstArray: ["选项一", "选项二", "选项三"],
         secondArray: [],
         thirdArray: []
      },
      firstIndex: 0,
      secondIndex: 0,
      thirdIndex: 0
   },
   handleFirstChange: function(e) {
      var firstIndex = e.detail.value;
      var firstArray = this.data.pickerData.firstArray;
      var secondArray = this.getSecondArray(firstIndex);
         
      this.setData({
         firstIndex: firstIndex,
         secondArray: secondArray,
         secondIndex: 0,
         thirdArray: [],
         thirdIndex: 0,
      })
   },
   handleSecondChange: function(e) {
      var secondIndex = e.detail.value;
      var firstIndex = this.data.firstIndex;
      var secondArray = this.data.pickerData.secondArray;
      var thirdArray = this.getThirdArray(firstIndex, secondIndex);
      
      this.setData({
         secondIndex: secondIndex,
         thirdArray: thirdArray,
         thirdIndex: 0
      })
   },
   handleThirdChange: function(e) {
      var thirdIndex = e.detail.value;
      this.setData({
         thirdIndex: thirdIndex
      })
   },
   getSecondArray: function(firstIndex) {
      // 根据firstIndex获取对应的secondArray
      // 示例代码省略
   },
   getThirdArray: function(firstIndex, secondIndex) {
      // 根据firstIndex和secondIndex获取对应的thirdArray
      // 示例代码省略
   }
})

上記のコードでは、前のレベル セレクターの値に基づいて次のレベル セレクターのデータ ソースを計算するために、2 つの補助関数 getSecondArray と getThirdArray を定義します。レベルセレクターです。これら 2 つの関数の具体的な実装は省略されており、開発者は実際のニーズに応じて定義できます。

概要

上記の手順により、WeChat アプレットでマルチレベルのリンケージ セレクター効果を実現できます。この例では、新しいページを作成し、マルチレベル リンケージ セレクターの基礎として 3 つのピッカー コンポーネントを定義します。次に、セレクターのデータ ソースを定義し、セレクターのリンケージ効果を処理することにより、マルチレベル リンケージ セレクターの実装を完了しました。

もちろん、上記の例は単なる実装方法であり、開発者は実際のニーズに応じて調整および拡張できます。この記事が、開発者が WeChat ミニ プログラムにマルチレベル リンケージ セレクター効果を実装する際に役立つことを願っています。

以上がWeChat ミニ プログラムにマルチレベルのリンケージ セレクター効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。