WeChat アプレット ピッカー マルチ列セレクター (モード = multiSelector)

{
  「ページ」: [
    「ページ/インデックス/インデックス」、
    「ページ/ログ/ログ」、
    「ページ/ピッカー/ピッカー」
  ]、
  "entryPagePath": "ページ/ピッカー/ピッカー",
  「ウィンドウ」: {
    "backgroundTextStyle": "light",
    "ナビゲーションバーの背景色": "#fff",
    "navigationBarTitleText": "Weixin",
    "ナビゲーションバーのテキストスタイル": "黒"
  },
  "サイトマップの場所": "サイトマップ.json",
  "コンポーネントの使用": {
    "van-button": "@vant/weapp/button/index",
    "van-area": "@vant/weapp/area/index"
  }
}

<!--pages/picker/picker.wxml-->
<表示>
  <view class="section__title">複数列セレクター</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
    値="{{multiIndex}}" 範囲="{{newArr}}">
    <view class="picker">
      現在の選択: <van-button type="primary">
        {{newArr[0][multiIndex[0]]}}, {{newArr[1][multiIndex[1]]}}, {{newArr[2][multiIndex[2]]}}</van-button>
    </ビュー>
  </ピッカー>
</ビュー>

// ページ/ピッカー/ピッカー.js
ページ（{
  /**
   * ページの初期データ */
  データ： {
    マルチ配列: [{
        id: 1,
        ラベル:「南東」、
        子供たち： [{
            id: 2,
            ラベル:「上海」、
            子供たち： [{
                id: 3,
                ラベル: 「普陀」、
              },
              {
                id: 4,
                ラベル:「黄埔」、
              },
              {
                id: 5,
                ラベル: "徐匯",
              },
            ]、
          },
          {
            id: 7,
            ラベル:「江蘇省」、
            子供たち： [{
                id: 8,
                ラベル:「南京」、
              },
              {
                id: 9,
                ラベル:「蘇州」、
              },
              {
                id: 10,
                ラベル:「無錫」、
              },
            ]、
          },
          {
            id: 12,
            ラベル:「浙江省」、
            子供たち： [{
                id: 13,
                ラベル:「杭州」、
              },
              {
                id: 14,
                ラベル:「寧波」、
              },
              {
                id: 15,
                ラベル: 「嘉興」、
              },
            ]、
          },
        ]、
      },
      {
        id: 17,
        ラベル:「北西」、
        子供たち： [{
            id: 18,
            ラベル: 「陝西省」、
            子供たち： [{
                id: 19,
                ラベル:「西安」、
              },
              {
                id: 20,
                ラベル:「延安」、
              },
            ]、
          },
          {
            id: 21,
            ラベル:「新疆ウイグル自治区」、
            子供たち： [{
                id: 22,
                ラベル: 「ウルムチ」、
              },
              {
                id: 23,
                ラベル:「カラマイ」、
              },
            ]、
          },
        ]、
      },
    ]、
    マルチインデックス: [0, 0, 0],
    マルチID: [],
    新しい引数: [],
  },

  バインドマルチピッカーチェンジ(e) {
    コンソールにログ出力します。
  },
  バインドマルチピッカー列変更(e) {
    データ = {
      newArr: this.data.newArr、
      マルチインデックス: this.data.multiIndex、
      マルチIds: this.data.multiIds、
    };
    data.multiIndex[e.detail.column] = e.detail.value;

    検索列 = () => {
      arr1 = [] とします。
      arr2 = [] とします。
      this.data.multiArray.map((v, vk) => {
        if (data.multiIndex[0] === vk) {
          データ.multiIds[0] = {
            ...、
          };
          v.children.map((c, ck) => {
            arr1.push(c.label);
            if (data.multiIndex[1] === ck) {
              データ.multiIds[1] = {
                ...c、
              };
              c.children.map((t, vt) => {
                arr2.push(t.label);
                if (data.multiIndex[2] === vt) {
                  データ.マルチIds[2] = {
                    ...、
                  };
                }
              });
            }
          });
        }
      });
      データ.newArr[1] = arr1;
      データ.newArr[2] = arr2;
    };
    スイッチ (e.detail.column) {
      ケース0:
        // 切り替えるたびに初期値を復元します。data.multiIndex[1] = 0;
        データ.マルチインデックス[2] = 0;
        //関数処理を実行します searchColumn();
        壊す;
      ケース1:
        データ.マルチインデックス[2] = 0;
        検索列();
        壊す;
    }
    this.setData(データ);
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
    状態 = {
      編曲: [],
      ar1: [],
      ar2: [],
      ar3: [],
      マルチID: []
    }
    this.data.multiArray.map((v, vk) => {
      state.arr1.push(v.label);
      if (this.data.multiIndex[0] === vk) {
        状態.multiIds[0] = v;
      }
      (state.arr2.length <= 0) の場合 {
        v.children.map((c, ck) => {
          state.arr2.push(c.label);
          if (this.data.multiIndex[1] === ck) {
            状態.multiIds[1] = c;
          }
          (state.arr3.length <= 0) の場合 {
            c.children.map((t, tk) => {
              state.arr3.push(t.label);
              if (this.data.multiIndex[2] === tk) {
                状態.multiIds[2] = t;
              }
            });
          }
        });
      }
    });
    状態.arr[0] = 状態.arr1;
    状態1と状態2
    状態.arr[2] = 状態.arr3;
    this.setData({
      newArr: 状態.arr、
      マルチIds: state.multiIds、
    });
  },

  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {},

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数 () {},

  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数 () {},

  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {},

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {},

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {},

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {},
});