很多时候，用到小程序中的选项，如果少还好说， 但是如果一个页面有上百个， 而且还有查看历史，就是打开页面后，自动赋值选中的情况，所有就写了一个可以赋值粘贴的快速写的方法， 直接复制既可， 而且函数也就三个。
刚做完一个调查项目，里面几乎全是问题，输入框，选项。一个页面有上百个！！所有未了快速使用复制粘贴， 写了个公用。
image.png
image.png
image.png
image.png
image.png
page 中数据 主要是渲染数据选项的名字：fieldsInfo，以及选中的数据放哪里：allData
data: {
// 图片链接
img_server_url: app.globalData.img_server_url,
//自定义顶部
nvabarData: {
homeCapsule: false,
title: '个人特征',
fontColor: "white",
fontSize: '26rpx',
headerbg: '#04aceb',
hiddenBlock: false,
slot: false
},
navHeight: app.globalData.navHeight + app.globalData.statusHeight,
// 选项值
fieldsInfo: app.globalData.fieldsInfo,// 很多页面在用，就放app里面了
// 都是数组，看看样子
/*
housing_type: [
'市场商品房',
'保障性住房',
'人才安居房',
'机关事业单位安居房',
'小产权房',
'其他住房'
],
acquire_habitatio_mode: [
'购买',
'单独租赁',
'合租',
'单位员工宿舍',
'其他'
],
income:[
'请选择···',
'≤6',
'7-15',
'16-25',
'26-40',
'41-60',
'61-80',
'81-100',
'101-120',
'>120'
],
// 省略了···
*/
//数据值
allData:{
"start_time":"",
"end_time":"",
"person_number": "",
"sex": "",
省略了...
}
input 因为输入框非常多，每一个上面绑定了一个字段的名字，方便更改，省的重复写函数 data-field="relation_text" 而且查看的时候，赋值也方便。布局样式自己写。
<input class="field" type="text" data-field="relation_text" value="{{allData.relation_text}}" bindinput="inputChange"/>
/** 输入框 */
inputChange(e) {
// 因为输入框非常多，每一个上面绑定了一个值，方便更改，省的重复写函数
var fieldName = e.currentTarget.dataset.field;
var allData = this.data.allData;
allData[fieldName] = e.detail.value;
this.setData({
allData: allData
});
},
radio/checkbox选项，选中赋值，以及查看时候 根据一个数据，自动选中对应选项。
<!-- 多选查看的时候，设置选中： filters.setChecked(allData.design_industry,item) 多选的值是一组数组 -->
<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>
<!-- 单选查看的时候，设置选中： allData.relation==item 因为单选值就是一个字符串，相等既可 -->
<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>
单选和多选用的同一个函数， 都是通过绑定的 field 字段来更改数据值， 同时里面还可以做出限制，比如做多几项，
/* 点击选项 单选多选公用 */
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('不提供交通补贴')!=-1){
itemData = ['不提供交通补贴']
}
}
var names = ['design_industry', 'driving_aims'];
// 多选限制
if (Common.findInArr(fieldName, names)) {
if (itemData.length > 3) {
itemData = itemData.splice(0, 3);
wx.showToast({
title: '请最多选三项！',
icon: 'none',
duration: 1000,
mask: true
});
}
}
allData[fieldName] = itemData;
this.setData({
allData: allData
});
},
注意：上面用到了 filters.setChecked 过滤器， 为了设置查看历史时候，多选自动根据数据渲染选中情况，写了一个函数
<!-- 引入过滤器 -->
<wxs module="filters" src="../../utils/filter.wxs"></wxs>
// 过滤器函数内容
// 设置复选框选中
setChecked: function (selArr,fields) {
if (selArr == null || selArr == undefined || selArr == '') {
return false;
}
if (selArr.indexOf(fields) != -1) {
return true;
}
return false;
},
picker 选项 一样的写法， 都是给每一个 选择器 加一个 绑定的数据名字，方便更改值，和 页面一打开赋值。
<picker bindchange="pickerChange" data-field="man" value="{{allData.man}}" range="{{fieldsInfo.num_count}}">
<view class="picker">
{{fieldsInfo.num_count[allData.man]}}
</view>
</picker>
/* 弹窗 picker选项变化 事件 */
pickerChange(e) {
var fieldName = e.currentTarget.dataset.field;
var allData = this.data.allData;
allData[fieldName] = e.detail.value;
this.setData({
allData: allData
});
},
网友评论