我们在项目中,很多时候用到自定义的多选,全选的功能,样式也是根据ui图变化的,因此需要手写一个全选功能来实现ui图效果。
我们先理清楚几点:
1,点击一次选中,再点一次取消,再点击选中
2,不排他
3,当选择按钮全选中,全选按钮也变成选中,状态,反之
3,点击全选,列选择按钮全部选中票,反之
实现多选:
下面是ui上面提供的三种状态样式,未选中,全部是20rpx的小圆圈,选中一个后,选中的那个增加颜色,其他没选中的变成大圆圈。给下面的圆圈外部的盒子增加一个点击事件:seleCourse。循环的项有个isSele属性,来判断是否选中状态。
<view class="activity" v-for="(item,a) in courseList" :key="a" @click="seleCourse(item)">
<view v-if="!item.isSele" class="iconfont iconziyuan83" :style="{fontSize:isnotAllSele?'20rpx':''}"></view>
<view v-else-if="item.isSele" class="iconfont iconziyuan82" style="color: #FFB701;"></view>
</view>