微信小程序常用组件视频课程-表单组件-picker-普通 滚动选择器 的使用

提交效果

js代码

  /**
   * 页面的初始数据
   */
  data: {
    xuhao:0,
    xuhao2: 1,
    xuhao3:0,
    shuzu01:['中国','美国','巴西']
  },
  p1:function(e){
    console.log(e.detail.value)
    this.setData({ xuhao: e.detail.value})
  },
  p2: function (e) {
    console.log(e.detail.value)
    this.setData({ xuhao2: e.detail.value })
  },  
  p3: function (e) {
    console.log(e.detail.value)
    this.setData({ xuhao3: e.detail.value })
    console.log(this.data.shuzu01[this.data.xuhao3])
  },   
  mysubmit:function(e){
    console.log("表单提交")
    console.log(e.detail.value)
    console.log(e.detail.value.pic03)
    console.log(this.data.shuzu01[e.detail.value.pic03])
    
  },
  myreset:function(e){
    console.log("表单重置")
  },
wxml代码
<form bindsubmit='mysubmit' bindreset='myreset'>

  <view> 普通选择器</view>


  <picker range="{{['香蕉','苹果','西瓜','芒果','橙子']}}" value='{{xuhao}}' bindchange='p1' name='pic01'>
    当前选择：{{['香蕉','苹果','西瓜','芒果','橙子'][xuhao]}}
  </picker>

  <view>普通选择器2</view>
  <picker range="{{['香蕉2','苹果2','西瓜2','芒果2','橙子2']}}" value='{{xuhao2}}' bindchange='p2' name='pic02'>
    当前选择：{{['香蕉2','苹果2','西瓜2','芒果2','橙子2'][xuhao2]}}
  </picker>

  <picker range='{{shuzu01}}' value='{{xuhao3}}' bindchange='p3' name='pic03'>
    当前选择：{{shuzu01[xuhao3]}}
  </picker>

  <view>
    <button form-type='submit'>提交</button>
    <button form-type='reset'>重置</button>
  </view>

</form>

欢迎大家收看我的****：微信小程序组件入门到精通
https://edu.csdn.net/course/detail/16193