微信小程序实现多选框功能的实例代码
作者：青衫折扇
这篇文章主要介绍了微信小程序实现多选框功能及效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
我们先来看看效果: 两种状态: 选中/不选中
wxml
<!-- 选择 S -->
<view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" checked="{{item.selected}}" class="btn {{item.selected ? 'btn-selected' : ''}}" >
{{item.title}}
</view>
<!-- 选择 E -->
核心js
Page({
/**
* 页面的初始数据
*/
data: {
riderCommentList: [{
value: '商品品质',
selected: false,
title: '商品品质'
}, {
value: '眉笔质地',
selected: false,
title: '眉笔质地'
}, {
value: '最新',
selected: false,
title: '最新'
}, {
value: '正品',
selected: false,
title: '正品'
}, {
value: '包装完整',
selected: false,
title: '包装完整'
}, {
value: '是否防水',
selected: false,
title: '是否防水'
}, {
value: '其他',
selected: false,
title: '其他'
}]
},
checkboxChange(e) {
console.log('checkboxChange e:', e);
let string = "riderCommentList[" + e.target.dataset.index + "].selected"
this.setData({
[string]: !this.data.riderCommentList[e.target.dataset.index].selected
})
let detailValue = this.data.riderCommentList.filter(it => it.selected).map(it => it.value)
console.log('所有选中的值为：', detailValue)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxss
.btn{
font-size: 24rpx;
padding: 12rpx 19rpx;
border: 1px solid #dcdcdc;
background: #F8F8F8;
border-radius: 10rpx;
margin-right: 30rpx;
margin-bottom: 22rpx;
text-align: center;
display: inline-block;
color: #666666;
}
.btn:nth-child(5) {
margin-right: 0;
}
.btn-selected{
border: 1px solid #FF7C80;
color: #F73C41;
background: #FFFFFF;
}
总结
到此这篇关于微信小程序实现多选框功能的实例代码的文章就介绍到这了,更多相关微信小程序 多选框功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！