微信小程式實例：如何實作滑動選擇器（附程式碼）

這篇文章帶給大家的內容是關於微信小程式實例：如何實現滑動選擇器（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

實作微信小程式滑動選擇效果

#在wxml檔中，用一個picker標籤代表選擇器，bindchange是使用者點選確定後觸發的函數，index是picker自帶的參數，使用者點選確定後，bindchange綁定的函數用.detail.value就可以存取。第一個選擇的index值為0，依序遞增。 range要在page的data中先定義一個陣列給它賦值，然後陣列的值就會變成選擇器中的選項

<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的值就可以實現不同的選擇了。

相關文章推薦：

微信小程式實例：實作頂部tab切換以及滑動切換時導覽列會隨著移動的效果（程式碼）

#微信小程式實例：取得目前城市位置及再次授權地理位置的程式碼實作

#

以上是微信小程式實例：如何實作滑動選擇器（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！