很多知识就是在开发中让我们更加努力学习，本篇文章主要就是讲在微信小程序中实现多项选择器checkbox。
第一的话就是我们的相关的布局文件：
<view class="container">
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<label class="checkbox">
<checkbox value="cb" checked="true"/>选中
</label>
<label class="checkbox">
<checkbox value="cb" />未选中
</label>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
</view>
</view>然后的话就是我们的小程序的逻辑部分：
Page({
// 在我们的这个位置的话填充我们的相关的数据
onShareAppMessage(){
// 在我们的这个位置的话就是闯进我们的相关的方法
return{
title: 'checkbox',
path: 'pages/checkbox/checkbox'
}
},
// 然后的话就是填充我们的相关的数据：
data:{
// 然后的话在我们的这个位置的话就是设置我们的相关的方法
items:[
{value:'usa', name:'影响力'},
{ value: 'usa', name: '影响力' },
{ value: 'usa', name: '韭菜的自我修养' },
{ value: 'usa', name: '你的名字' },
{ value: 'usa', name: '怪诞行为学' ,checked: 'true'},
{ value: 'usa', name: '教父' },
{ value: 'usa', name: '经济学原理' },
{ value: 'usa', name: '三国演义' },
{ value: 'usa', name: '绝对成交' },
{ value: 'usa', name: '行为经济学讲义' },
{ value: 'usa', name: '黑天鹅' },
{ value: 'usa', name: '灰犀牛' },
]
},
// 在我们的额这个位置的话就是设置我们的相关的方法
// 在我们的这个位置的话就是创建一个有参数的构造方法
checkboxChange(e){
// 在我们的这位置的话就是在我们的控制台中输出我们需要的东西
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
const items = this.data.items
const values = e.detail.value
// 然后的话在我们的这个位置使用我们的for循环来设置创建我们的相关的东西
for (let i = 0, lenI = items.length; i < lenI; ++ i){
// 然后的话就是循环遍历到后就获取到我们的东西
items[i].checked = false
for (let j = 0, lenJ = values.length; j < lenJ; ++j){
if (items[i].value === values[j]){
items[i].checked = true
break
}
}
}
// 然后的话在我们的下面的这个位置的话就是设置我们的相关的方法
this.setData({
items
})
}
})全部内容已讲述完毕，欢迎大家关注更多后续精彩内容。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/128369.html
摘要：小程序文档上说目前支持的选择器有选择器样例样例描述选择所有拥有的组件选择拥有的组件选择所有组件选择所有文档的组件和所有的组件在组件后边插入内容在组件前边插入内容在实践中我发现除了文档上说的几种选择器经过测试发现其实还有几种支持的选择器没有列 小程序文档上说 目前支持的选择器有： 选择器 样例 样例描述 .class .intro 选择所有拥有 class=intro 的组件 ...
摘要：小程序文档上说目前支持的选择器有选择器样例样例描述选择所有拥有的组件选择拥有的组件选择所有组件选择所有文档的组件和所有的组件在组件后边插入内容在组件前边插入内容在实践中我发现除了文档上说的几种选择器经过测试发现其实还有几种支持的选择器没有列 小程序文档上说 目前支持的选择器有： 选择器 样例 样例描述 .class .intro 选择所有拥有 class=intro 的组件 ...
在工作中效率要求是很高的，现在就在频繁用到复选框，我们自己来写了个组件，增加其复用性，提高效率。 先看效果图： 这样只需提交后得到一个选中项的id组成的数组 下边直接上代码： 代码地址为：components/checkGrop/checkGrop wxml: <formbindsubmit="formSubmit"> <viewclass...
摘要：第一步搭开发环境首先，我们需要在本地搭建好微信小程序的开发环境。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中，已经部署好了，但是还需要在下修改配置中的域名证书私钥。 「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有...
摘要：第一步搭开发环境首先，我们需要在本地搭建好微信小程序的开发环境。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中，已经部署好了，但是还需要在下修改配置中的域名证书私钥。 「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有...
阅读 277·2023-03-27 18:33
阅读 616·2023-03-27 17:49
阅读 437·2023-03-26 17:27
阅读 296·2023-03-26 17:14
阅读 323·2023-03-17 21:13
阅读 271·2023-03-17 08:28
阅读 1343·2023-02-27 22:32
阅读 846·2023-02-27 22:27
