微信小程序picker表單選擇器的使用

微信小程序picker表單選擇器的使用
bindchange:當(dāng)選擇項(xiàng)改變時(shí)觸發(fā)的方法
range：選項(xiàng)數(shù)組可以是二維數(shù)組
range-key:如果是二維數(shù)組時(shí)，用此屬性指定第二維數(shù)組的鍵以達(dá)到在選擇項(xiàng)中顯示這個(gè)鍵對(duì)應(yīng)的鍵值
value：是當(dāng)前值是當(dāng)前選中的數(shù)組的索引，是第一維數(shù)組的鍵，當(dāng)改變選項(xiàng)后js會(huì)吧這個(gè)值改為用戶所選擇的項(xiàng)目第一維數(shù)組的鍵，注意picker只是改變的這個(gè)value的值并不是改變value初始的那個(gè)變量townindex的值，此時(shí)如果不在綁定程序里setData({townindex:})改變這個(gè)初始變量的值為value值，那在控制臺(tái)wxml中看到value的值已經(jīng)改變了，但是控制臺(tái)appdata中這個(gè)初始變量townindex的值還是0沒(méi)有變化，此時(shí)包裹的那個(gè)顯示當(dāng)前選擇的內(nèi)容的索引鍵變量也沒(méi)有改變以上都測(cè)試過(guò)，但是不知道此時(shí)提交表單應(yīng)該是什么值，微信小程序提交表單都是通過(guò)js里form綁定的提交方法formSubmit里通過(guò)接口提交的，所以不要考慮wxml里表單的提交的值，只要能在form綁定的提交方法formSubmit中獲得當(dāng)前數(shù)據(jù)，通過(guò)當(dāng)前選擇的鍵索引townindex和頁(yè)面數(shù)據(jù)選項(xiàng)數(shù)組town獲得
picker內(nèi)包裹一個(gè)view 用weiui的話class是weui-select，標(biāo)簽內(nèi)的內(nèi)容是沒(méi)有打開(kāi)選擇器時(shí)或選擇完后顯示的當(dāng)前值的內(nèi)容

如下面代碼文章來(lái)源地址http://www.zghlxwxcb.cn/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;">鄉(xiāng)鎮(zhèn)</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);
      //實(shí)際imgList表中的內(nèi)容應(yīng)該使用wx.chooseImage獲取
      let files = that.data.imgs;  //圖片URL數(shù)組，實(shí)際使用替換為自己的圖片url數(shù)組
      let uploads =[];  //構(gòu)建的promise數(shù)組
      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("圖片部分發(fā)送完成",res)
      wx.hideLoading();
      wx.showModal({
        title: '提交成功',
        content: '是否繼續(xù)發(fā)布',
        success (res) {
          if (res.confirm) {
            that.onLoad() 
          } else if (res.cancel) {
            wx.switchTab({
              url:'/qsjs/pages/index/index'
            })
          }
        }
      })
     
      })

     
    })
  },

到了這里，關(guān)于微信小程序picker表單選擇器的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！