微信小程序如何实现类似复选框的交互效果？

本文共计734个文字，预计阅读时间需要3分钟。

本文以实例形式分享了微信小程序实现复选框组件的整体代码，供大家参考。具体内容如下：

样式部分：

css/* checkbox.css */.checkbox-group { display: flex; flex-direction: column;}

.checkbox-item { display: flex; align-items: center; margin-bottom: 10px;}

.checkbox-label { margin-left: 10px;}

结构部分：

xml {{item}}

逻辑部分：

javascript// checkbox.jsPage({ data: { arr: ['选项1', '选项2', '选项3'], arrS: '' }, onCheckboxChange: function(e) { const value=e.detail.value; if (value.includes(this.data.arrS)) { this.setData({ arrS: '' }); } else { this.setData({ arrS: value.join(',') }); } }});

使用说明：

1. 将以上代码保存为 `checkbox.wxml`、`checkbox.wxss` 和 `checkbox.js` 文件。

2.在需要使用复选框组件的页面中，引入 `checkbox.wxml` 文件。

3.在页面数据中定义 `arr` 数组，用于存储选项。

4.在页面逻辑中，定义 `arrS` 数据用于存储选中的值。

功能说明：

- 用户点击复选框，可以选中或取消选中选项。

- 当用户选中多个选项时，页面会显示所有选中的值，以逗号分隔。- 当用户取消选中所有选项时，页面会显示空字符串。

本文实例为大家分享了微信小程序实现复选框片展示的具体代码，供大家参考，具体内容如下

样式部分你们自由发挥，反正这里是什么都没写的，选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了，之后你们都懂的。

效果预览：

js部分

// page/index/index.js Page({ /** * 页面的初始数据 */ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value: '中国' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'TUR', value: '法国' }, ], arr: [], arrStatus: [] }, check: function (e) { //获取当前选中的值 var checkValue = e.currentTarget.dataset.val; //获取当前选中的下标 var checkIndex = e.currentTarget.dataset.index; //当前选中的取反值 this.data.arrStatus[checkIndex] = !this.data.arrStatus[checkIndex]; if (this.data.arrStatus[checkIndex]) { //如果当前为选中状态则将值插入进数组中 this.data.arr.push(checkValue); }else{ //如果当前为未选中状态则将值从数组中删除并返回一个新的数组 for (var i in this.data.arr) { if (this.data.arr[i] == checkValue) { this.data.arr.splice(i); } } } //打印当前所选中的数据 console.log(this.data.arr); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //设置数组中每一个数据的状态 for (var i in this.data.items) { this.data.arrStatus[i] = false; } }, })

wxml部分：

<block wx:for='{{ items }}'>
<text data-index='{{ index }}' data-val='{{ item.value }}' catchtap='check'>{{ item.value }}</text>
</block>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。