wxml文件代码如下:
html
<!--页面顶部 引入wxs文件-->
<wxs module="tools" src="../../filter/tools.wxs"></wxs>
...
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{cancerItems}}" wx:key="value">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{tools.getIncludes(checkedCancers, item.value)}}"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
js代码如下:
javascript
Page({
data: {
// 癌种
cancerItems: [
{value: 'fou', name: '否'},
{value: 'fei', name: '肺癌'},
{value: 'ruxian', name: '乳腺癌'},
{value: 'wei', name: '胃癌'},
{value: 'gan', name: '肝癌'},
{value: 'qita', name: '其他'}
],
checkedCancers: [], // 选择的癌种
},
checkboxChange (event) {
console.log('event', event)
let checkedVal = event.detail.value
if (checkedVal[checkedVal.length - 1] === 'fou') { // 如果用户选择了"否",则其他癌种清空
checkedVal = ['fou']
} else { // 如果选择癌种或者"其他","否"取消选择
const index = checkedVal.indexOf('fou')
if (index > -1) {
checkedVal.splice(index, 1)
}
if (checkedVal.includes('fou')) { // 如果选择"其他"
//
}
}
this.setData({
checkedCancers: checkedVal
})
}
})
所谓tool.getIncludes 方法需要 引入 tool.wxs 文件
文件代码如下:
javascript
var tools = {
getIncludes: function(val, target) {
if(!val) return
if(val.indexOf(target) > -1) {
return true
} else {
return false
}
}
}
module.exports = {
getIncludes: tools.getIncludes
}
注:微信小程序提到:WXS(WeiXin Script)是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。另外, WXS 还可以用来编写简单的 WXS 事件响应函数。