微信小程序实现单选、全选功能 心已赠人 2022-10-09 03:26 708阅读 0赞 ### 前言概述 ### 本文介绍微信小程序实现单选、全选功能,效果如下: ![20210623180036255.gif][] ### 实现过程 ### 1、先实现页面效果,文件\*.wxml和\*.wxss代码如下: <view class="container"> <view class="order-mes"> <checkbox-group class="table"> <view class="tr"> <view class="th">日期</view> <view class="th"><checkbox checked="{ {breakfastAll}}" value="breakfastAll" bindtap="selectbreakfastAll" data-type="breakfast" />早</view> <view class="th"><checkbox checked="{ {lunchAll}}" value="lunchAll" bindtap="selectlunchAll" data-type="lunch" />午</view> <view class="th last"><checkbox checked="{ {dinnerAll}}" value="dinnerAll" bindtap="selectdinnerAll" data-type="dinner" />晚</view> </view> <view class="tr" wx:for="{ {orders}}" wx:key="id"> <view class="td first"> <view class="serial">{ {item.date.day}}</view> <view class="week">{ {item.date.week}}</view> </view> <view class="td { {item.breakfast.checked ? '' : 'gray'}}"><checkbox value="{ {item.breakfast.value}}" checked="{ {item.breakfast.checked}}" bindtap="select" data-index="{ {index}}" data-type="breakfast" />{ {item.breakfast.checked ? '已订' : '未订'}}</view> <view class="td { {item.lunch.checked ? '' : 'gray'}}"><checkbox value="{ {item.lunch.value}}" checked="{ {item.lunch.checked}}" bindtap="select" data-index="{ {index}}" data-type="lunch" />{ {item.lunch.checked ? '已订' : '未订'}}</view> <view class="td last { {item.dinner.checked ? '' : 'gray'}}"><checkbox value="{ {item.dinner.value}}" checked="{ {item.dinner.checked}}" bindtap="select" data-index="{ {index}}" data-type="dinner" />{ {item.dinner.checked ? '已订' : '未订'}}</view> </view> </checkbox-group> </view> </view> page { font-size: 28rpx; } .table { border: 2rpx solid #ccc; } .table .tr { display: flex; border-bottom: 2rpx solid #ccc; } .table .tr:last-child { border-bottom: none; } .table .tr .th { background-color: #ccc; font-size: 30rpx; } .table .tr .th { border-right: 2rpx solid #fff; } .table .tr .td { border-right: 2rpx solid #ccc; position: relative; } .table .tr .td.gray { color: #999; } .table .tr .th, .table .tr .td { flex: 1; text-align: center; padding: 20rpx 0; } .table .tr .th.last, .table .tr .td.last { border-right: none; } .table .tr .td.first { display: flex; justify-content: center; color: #666; padding: 0; } .table .tr .td.first .serial { border-right: 2rpx solid #ccc; padding: 20rpx 0; flex: 1; text-align: center; } .table .tr .td.first .week { padding: 20rpx 0; flex: 1; text-align: center; } .table .tr .th checkbox { transform: scale(0.8, 0.8); vertical-align: middle; margin-top: -8rpx; } .table .tr .td checkbox { transform: scale(3, 1.2); vertical-align: middle; margin-top: -14rpx; position: absolute; top: 15px; left: 38px; opacity: 0; } 2、接下来实现交互逻辑,文件\*.js代码实现如下: Page({ /** * 页面的初始数据 */ data: { breakfastAll: true, lunchAll: true, dinnerAll: true, orders: [{ date: { day: 1, week: '周日' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }, { date: { day: 2, week: '周一' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }, { date: { day: 3, week: '周二' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }, { date: { day: 4, week: '周三' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }, { date: { day: 5, week: '周四' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }, { date: { day: 6, week: '周五' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }, { date: { day: 7, week: '周六' }, breakfast: { checked: true, value: 1 }, lunch: { checked: true, value: 1 }, dinner: { checked: true, value: 1 } }] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) {}, // 全选早 selectbreakfastAll: function (e) { let type = e.currentTarget.dataset.type; let status = !this.data.breakfastAll; this.selectAll(type, status); this.setData({ breakfastAll: status }); }, // 全选午 selectlunchAll: function (e) { let type = e.currentTarget.dataset.type; let status = !this.data.lunchAll; this.selectAll(type, status); this.setData({ lunchAll: status }); }, // 全选晚 selectdinnerAll: function (e) { let type = e.currentTarget.dataset.type; let status = !this.data.dinnerAll; this.selectAll(type, status); this.setData({ dinnerAll: status }); }, // 全选函数 selectAll: function (type, status) { let orders = this.data.orders; orders.map((item, index) => { item[type].checked = status; }); // console.log(orders) this.setData({ orders }); }, // 点击单选 select: function (e) { let type = e.currentTarget.dataset.type; let currentIndex = e.currentTarget.dataset.index; let orders = this.data.orders; let total = 0; orders.map((item, index) => { if (index === currentIndex) { item[type].checked = !item[type].checked; } }); orders.map((item, index) => { if (item[type].checked) { total = total + 1; } }); let status = orders.length == total ? true : false; switch (type) { case 'breakfast': this.setData({ breakfastAll: status }); break; case 'lunch': this.setData({ lunchAll: status }); break; case 'dinner': this.setData({ dinnerAll: status }); break; } this.setData({ orders }); // console.log(orders) } }) ![20210623180743869.jpg][] [20210623180036255.gif]: /images/20221005/1c586f33bc734ee3957b2dea923d05fc.png [20210623180743869.jpg]: /images/20221005/db8a0875bd0c45c7acdf191e82af196c.png
还没有评论,来说两句吧...