微信小程序picker表单选择器的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序picker表单选择器的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序picker表单选择器的使用

微信小程序picker表单选择器的使用
bindchange:当选择项改变时触发的方法
range：选项数组可以是二维数组
range-key:如果是二维数组时，用此属性指定第二维数组的键以达到在选择项中显示这个键对应的键值
value：是当前值是当前选中的数组的索引，是第一维数组的键，当改变选项后js会吧这个值改为用户所选择的项目第一维数组的键，注意picker只是改变的这个value的值并不是改变value初始的那个变量townindex的值，此时如果不在绑定程序里setData({townindex:})改变这个初始变量的值为value值，那在控制台wxml中看到value的值已经改变了，但是控制台appdata中这个初始变量townindex的值还是0没有变化，此时包裹的那个显示当前选择的内容的索引键变量也没有改变以上都测试过，但是不知道此时提交表单应该是什么值，微信小程序提交表单都是通过js里form绑定的提交方法formSubmit里通过接口提交的，所以不要考虑wxml里表单的提交的值，只要能在form绑定的提交方法formSubmit中获得当前数据，通过当前选择的键索引townindex和页面数据选项数组town获得
picker内包裹一个view 用weiui的话class是weui-select，标签内的内容是没有打开选择器时或选择完后显示的当前值的内容

如下面代码文章来源地址https://www.toymoban.com/news/detail-593580.html

<view class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after" style="background-color: #ffffff;height: 80rpx;">
     <view class="weui-cell__hd">
         <label class="weui-label" style="width: 3em;">乡镇</label>
    </view>
    <view class="weui-cell__bd">
        <picker aria-role="combobox" bindchange="bindPicker3Change" value="{{townindex}}" range="{{town}}" range-key="name">
            <view class="weui-select">{{town[townindex].name}}</view>
        </picker>
	</view>
</view>

bindPicker3Change:function(e){
    let that=this;
    console.log(that.data.town[e.detail.value]['id']);
    util.get("cun",{'id':that.data.town[e.detail.value]['id']}).then(data => {
      console.log(data);
      that.setData({
        cun:data
      })
    });
    this.setData({
      townindex:e.detail.value
    })
  },
  bindPicker2Change:function(e){
    let that=this;
    console.log(e);
    this.setData({
      cunindex:e.detail.value
    })
  },
  bindPicker1Change:function(e){
    let that=this;
    console.log(e);
    this.setData({
      jsfsindex:e.detail.value
    })
  },

formSubmit:function(e){
    wx.showLoading({
      title: '提交中...',
    })
    let val=e.detail.value;
    var that=this,time=Date.now();
    console.log(time);
    let data={
      town:that.data.town[that.data.townindex].id,
      village:that.data.cun[that.data.cunindex].id,
      livegroup:val.livegroup,
      placecate:val.placecate,
      placename:val.placename,
      jsfs:that.data.jsfs[that.data.jsfsindex].id,
      addres:val.addres,
      lat:val.lat,
      lng:val.lng,
      status:0,
      addtime:time
    }
    console.log(data);
    util.post('postplace',data).then(data => {
      console.log(data);
      console.log(data);
      //实际imgList表中的内容应该使用wx.chooseImage获取
      let files = that.data.imgs;  //图片URL数组，实际使用替换为自己的图片url数组
      let uploads =[];  //构建的promise数组
      files.forEach((item,index)=>{  //item为图片的url
        uploads.push(uploader(item,weutil.url("entry/wxapp/postplace",{'m':'qsjs'}),data[0]))
      })
      Promise.all(uploads).then(res=>{
      console.log("图片部分发送完成",res)
      wx.hideLoading();
      wx.showModal({
        title: '提交成功',
        content: '是否继续发布',
        success (res) {
          if (res.confirm) {
            that.onLoad() 
          } else if (res.cancel) {
            wx.switchTab({
              url:'/qsjs/pages/index/index'
            })
          }
        }
      })
     
      })

     
    })
  },