WeChat ミニ プログラムの例: スライディング セレクターの実装方法 (コード付き)

この記事では、WeChat アプレットの例を紹介します。スライディング セレクターの実装方法 (コード付き) を紹介します。必要な方は参考にしてください。

WeChat ミニプログラムのスライド選択効果を実現します

wxml ファイルでは、ユーザーが [OK] をクリックした後にトリガーされる関数として、ピッカー タグが使用されます。インデックスはパラメーターです。 [OK] をクリックすると、bindchange にバインドされた関数に .detail.value を使用してアクセスできます。最初の選択のインデックス値は 0 で、順番に増加します。 Range は、まずページのデータ内で配列を定義し、それに値を割り当てる必要があります。その後、配列の値がセレクターのオプションになります

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
   <view class=&#39;choseQuestion&#39; >
    {{choseQuestionBank}}
   </view>
  </picker>

js ファイル内の対応するデータと関数は次のとおりです

Page({
 data:{
  array:['全部','计算机网络','算法','数据结构','linux'],
  type:0,
  choseQuestionBank:"点击选择"
 },
 bindPickerChange: function (e) {
  var that=this
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({
   type: e.detail.value,
   choseQuestionBank: that.data.array[e.detail.value]
  })
 },
})

クリックして選択を確認すると、this.data.type の値を判断して別の選択を行うことができます。

おすすめ関連記事:

WeChat ミニ プログラムの例: トップタブ切り替えとスライド切り替えの効果を実現するために、ナビゲーション バーもそれに合わせて移動します (コード)

WeChat ミニ プログラムの例: 現在の都市の位置を取得そして location の地理コード実装を再承認します

以上がWeChat ミニ プログラムの例: スライディング セレクターの実装方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。