微信小程序滑動選擇器


  實現微信小程序滑動選擇效果

  在wxml文件中,用一個picker標簽代表選擇器,bindchange是用戶點擊確定后觸發的函數,index是picker自帶的參數,用戶點擊確定后,bindchange綁定的函數用.detail.value就可以訪問到。第一個選擇的index值為0,依次遞增。range要在page的data中先定義一個數組給它賦值,然后數組的值就會變為選擇器中的選項

    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <view  class='choseQuestion' >
        {{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的值就可以實現不同的選擇了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM