很多時(shí)候，用到小程序中的選項(xiàng)，如果少還好說(shuō)， 但是如果一個(gè)頁(yè)面有上百個(gè)， 而且還有查看歷史，就是打開(kāi)頁(yè)面后，自動(dòng)賦值選中的情況，所有就寫了一個(gè)可以賦值粘貼的快速寫的方法， 直接復(fù)制既可， 而且函數(shù)也就三個(gè)。

剛做完一個(gè)調(diào)查項(xiàng)目，里面幾乎全是問(wèn)題，輸入框，選項(xiàng)。一個(gè)頁(yè)面有上百個(gè)！！所有未了快速使用復(fù)制粘貼， 寫了個(gè)公用。

image.png

image.png

image.png

image.png

image.png

page 中數(shù)據(jù) 主要是渲染數(shù)據(jù)選項(xiàng)的名字：fieldsInfo，以及選中的數(shù)據(jù)放哪里：allData

data: {
    // 圖片鏈接
    img_server_url: app.globalData.img_server_url,
    //自定義頂部
    nvabarData: {
      homeCapsule: false,
      title: '個(gè)人特征',
      fontColor: "white",
      fontSize: '26rpx',
      headerbg: '#04aceb',
      hiddenBlock: false,
      slot: false
    },
    navHeight: app.globalData.navHeight + app.globalData.statusHeight,
    // 選項(xiàng)值
    fieldsInfo: app.globalData.fieldsInfo,// 很多頁(yè)面在用，就放app里面了
    // 都是數(shù)組，看看樣子
   /*
     housing_type: [
        '市場(chǎng)商品房',
        '保障性住房',
        '人才安居房',
        '機(jī)關(guān)事業(yè)單位安居房',
        '小產(chǎn)權(quán)房',
        '其他住房'
      ],
      acquire_habitatio_mode: [
        '購(gòu)買',
        '單獨(dú)租賃',
        '合租',
        '單位員工宿舍',
        '其他'
      ],
      income:[
        '請(qǐng)選擇···',
        '≤6',
        '7-15',
        '16-25',
        '26-40',
        '41-60',
        '61-80',
        '81-100',
        '101-120',
        '>120'
      ],
     // 省略了···
*/
    //數(shù)據(jù)值
    allData:{
      "start_time":"",
      "end_time":"",
      "person_number": "",
      "sex": "",
       省略了...
    }

input 因?yàn)檩斎肟蚍浅６啵恳粋€(gè)上面綁定了一個(gè)字段的名字，方便更改，省的重復(fù)寫函數(shù) data-field="relation_text" 而且查看的時(shí)候，賦值也方便。布局樣式自己寫。

    <input class="field" type="text" data-field="relation_text" value="{{allData.relation_text}}" bindinput="inputChange"/>

/** 輸入框 */
  inputChange(e) {
  // 因?yàn)檩斎肟蚍浅６?，每一個(gè)上面綁定了一個(gè)值，方便更改，省的重復(fù)寫函數(shù)
    var fieldName = e.currentTarget.dataset.field;
    var allData = this.data.allData;
    allData[fieldName] = e.detail.value;
    this.setData({
      allData: allData
    });
  },

radio/checkbox選項(xiàng)，選中賦值，以及查看時(shí)候 根據(jù)一個(gè)數(shù)據(jù)，自動(dòng)選中對(duì)應(yīng)選項(xiàng)。

  <!-- 多選查看的時(shí)候，設(shè)置選中： filters.setChecked(allData.design_industry,item)   多選的值是一組數(shù)組 -->
  <checkbox-group class="radio-group-wrap" bindchange="radioChange" data-field="design_industry">
      <checkbox class="radio" style="min-width:30%;margin-right:10rpx;" color="#fff" wx:key="*this" wx:for="{{fieldsInfo.design_industry}}" wx:for-item="item" value="{{item}}" checked="{{ filters.setChecked(allData.design_industry,item) }}">
           <text>{{item}}</text>
      </checkbox>
 </checkbox-group>
  <!-- 單選查看的時(shí)候，設(shè)置選中： allData.relation==item  因?yàn)閱芜x值就是一個(gè)字符串，相等既可   -->
<radio-group class="radio-group-wrap" bindchange="radioChange" data-field="relation">
    <radio class="radio" style="width:calc( 100% / 4 );" color="#fff" wx:key="*this" wx:for="{{fieldsInfo.relation}}" wx:for-item="item" value="{{item}}" checked="{{allData.relation==item}}">
        <text>{{item}}</text>
    </radio>
 </radio-group>

單選和多選用的同一個(gè)函數(shù)， 都是通過(guò)綁定的 field 字段來(lái)更改數(shù)據(jù)值， 同時(shí)里面還可以做出限制，比如做多幾項(xiàng)，

/* 點(diǎn)擊選項(xiàng) 單選多選公用 */
  radioChange(e) {
    var fieldName = e.currentTarget.dataset.field;
    var allData = this.data.allData;
    var itemData = e.detail.value;
    if (fieldName=="traffic_subsidy"){
      if (itemData.indexOf('不提供交通補(bǔ)貼')!=-1){
        itemData = ['不提供交通補(bǔ)貼']
      }
    }
    var names = ['design_industry', 'driving_aims'];
    // 多選限制
    if (Common.findInArr(fieldName, names)) {
      if (itemData.length > 3) {
        itemData = itemData.splice(0, 3);
        wx.showToast({
          title: '請(qǐng)最多選三項(xiàng)！',
          icon: 'none',
          duration: 1000,
          mask: true
        });
      }
    }
    allData[fieldName] = itemData;
    this.setData({
      allData: allData
    });
  },

注意：上面用到了 filters.setChecked 過(guò)濾器， 為了設(shè)置查看歷史時(shí)候，多選自動(dòng)根據(jù)數(shù)據(jù)渲染選中情況，寫了一個(gè)函數(shù)

<!-- 引入過(guò)濾器 -->
<wxs module="filters" src="../../utils/filter.wxs"></wxs>
// 過(guò)濾器函數(shù)內(nèi)容
// 設(shè)置復(fù)選框選中
  setChecked: function (selArr,fields) {
    if (selArr == null || selArr == undefined || selArr == '') {
      return false;  
    }
    if (selArr.indexOf(fields) != -1) {
      return true;
    } 
    return false;  
  },

picker 選項(xiàng) 一樣的寫法， 都是給每一個(gè) 選擇器 加一個(gè) 綁定的數(shù)據(jù)名字，方便更改值，和 頁(yè)面一打開(kāi)賦值。

<picker bindchange="pickerChange" data-field="man"  value="{{allData.man}}" range="{{fieldsInfo.num_count}}">
                <view class="picker">
                  {{fieldsInfo.num_count[allData.man]}}
                </view>
              </picker>

/* 彈窗 picker選項(xiàng)變化 事件 */
  pickerChange(e) {
    var fieldName = e.currentTarget.dataset.field;
    var allData = this.data.allData;
    allData[fieldName] = e.detail.value;
    this.setData({
      allData: allData
    });
  },