小程序如何实现下拉选项操作

wxml文件代码

<picker class="picker" 
    mode="selector" 
    bindchange="bindAccountChange" 
    value="{{accountIndex}}" 
    range-key="label"
    range="{{accounts}}
">

    <view class="weui-select">{{accounts[accountIndex].label}}</view>

</picker>

js代码实现

  data: {
    accountIndex:0,
    accounts: [ // value传给后台的值 ， label页面上显示的文字
          {value:'today', label:'今天'},
          {value:'tomorrow', label:'明天'},
          {value:'week', label:'本周'},
          {value:'month', label:'本月'},
          {value:'year', label:'本年'},
        ]
  },


 // 下拉切换
  bindAccountChange(e){
    console.log('切换改变的值', e.detail.value);
    this.setData({
        accountIndex: e.detail.value
    })
  },

 效果实现

完结；

扫码查看小程序