微信小程序多项选择器checkbox
2021/5/13 14:55:49
本文主要是介绍微信小程序多项选择器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 }) } })
这篇关于微信小程序多项选择器checkbox的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-03微信小程序分享跳转-icode9专业技术文章分享
- 2024-07-03小程序微信支付提示缺少total_fee-icode9专业技术文章分享
- 2024-07-03微信小程序携带参数分享 前后端交互流程-icode9专业技术文章分享
- 2024-07-02微信小程序中禁止左右滑动切换页面-icode9专业技术文章分享
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架