微信小程序button点击多选/单选简单实现:wxss
定义小程序按钮点击选中与未选中状态下的样式,多个button按钮使用wx:for
展示,通过点击改变原数据下自定义的选择字段true/false
来实现选中状态。
效果截图
1、WXML代码:
<button wx:for="{{diseaseList}}" wx:key="*this" data-index="{{index}}" class="{{item.checked ? 'active' : ''}}" bindtap="diseaseSwitch">{{item.diseaseName}}</button>
2、WXSS代码:
button{border-radius:40rpx;text-align:left;font-size:30rpx;background-color:rgba(255,255,255,1);border:2rpx solid #caccce;color:#8a8e99;padding:0rpx 30rpx;margin:0rpx 10rpx 10rpx 0rpx}
button::after{border:none}
button.active{background-color:#009ee6;border:2rpx solid #009ee6;color:#fff}
3、JS代码:
Page({
/**
* 页面的初始数据
*/
data: {
diseaseList: [
{diseaseCode: "S90.8", diseaseName: "踝和足的其他浅表损伤", checked: false},
{diseaseCode: "R05", diseaseName: "咳嗽", checked: false},
{diseaseCode: "P29.3", diseaseName: "胎儿循环存留", checked: false},
{diseaseCode: "J39.9", diseaseName: "上呼吸道疾病,未特指", checked: false},
{diseaseCode: "J31.0", diseaseName: "慢性鼻炎", checked: false},
{diseaseCode: "A37.1", diseaseName: "由于副百日咳博德特杆菌引起的百日咳", checked: false},
{diseaseCode: "N32.1", diseaseName: "膀胱肠瘘", checked: false},
{diseaseCode: "C17.3", diseaseName: "麦克尔憩室", checked: false},
{diseaseCode: "A16.9", diseaseName: "未特指的呼吸道结核病,未提及细菌学或组织学的证实", checked: false},
{diseaseCode: "A16.1", diseaseName: "肺结核病,未做细菌学和组织学检查", checked: false}
]
},
/**
* 疾病选择切换
*/
diseaseSwitch: function (options) {
let that = this;
// 按钮索引
var index = options.currentTarget.dataset.index;
// 索引对应内容
var item = that.data.diseaseList[index];
// 选中,未选中状态切换
item.checked = !item.checked;
// 更新
that.setData({
diseaseList: that.data.diseaseList
});
}
})