用了两天微信小程序后发现,真TMD方便,JS真的少了很多,响应式的布局真的省了开发人员的很多事。
这里是html代码
<view class="weui-cells weui-cells_form">
<view class="weui-cell weui-cell_active {{isWaring ? 'weui-cell_warn' : ''}}">
<view class="weui-cell__hd">
<label class="weui-label">跟单</label>
</view>
<view class="tui-content">
<checkbox-group bindchange="checkboxChange2">
<label class="checkbox" wx:for="{{gendanItems}}">
<view class="tui-menu-list">
<checkbox value="{{item.empNo}}" checked='{{filter.isChecked2(item.empNo,selectData2)}}' />{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
</view>
这里在html代码里我写了个这玩意儿,主要是在js文件里回显还得一个一个给对象的checked属性赋true,嫌麻烦,在网上找了个爽的,现贴上。
<wxs module="filter">
var isChecked2 = function(empNo, data) {
if (empNo != null) {
return data.indexOf(empNo) != -1 ? true : false;
}
return false;
}
module.exports = {
isChecked2: isChecked2,
}
</wxs>
gendanItems是一个集合对象,后端我是用java写的,从后端传过来的是一个List<bean>,这里大家就可以理解了吧。
selectData2是我js里捕获到的选中的数组。
贴上代码
showClearBtn: false,
selectData2: [] //记住要给个初始值,不然会报错,就这样[]也都可以。
},
checkboxChange2: function(e) {
var up = "pho.gendans2"; //pho是个对象后面的gendans2就是selectData2 可以直接拿给它
this.setData({
[up]: e.detail.value
});
},
这样就大功告成啦。