用 uniapp 写一个内外循环的全选与反选，不会的赶紧围观
作者：CRMEB
- 2022 年 4 月 12 日
本文字数：8290 字
阅读完需：约 27 分钟
根据项目需求；写的一个内外循环的全选与反选；遇到问题：由于是分页，选择全选，当上拉加载时；新加载的数据并没有被选中等问题，都被解决；如果有其他些问题；欢迎提出。
注意：这只我项目中的页面；有些全局引用的例如提示或是一些组件；使用的时候可以删除；并不影响主要功能；获取数据时；由于后台传的是以为数组；但实际需要的二维数据；下面获取数据的接口已经过处理；根据你们返回的数据格式可自行更改；我们项目中有一键换色；牵扯到颜色变量的可删除；写成固定颜色以下是详细代码：
Html：<template> <view> <view class="record" :style="colorStyle" v-if="visitList.length"> <view class="nav acea-row row-between-wrapper"> <view class="left">当前共 <text class="num">{{count}}</text> 件商品</view> <view class="font-num" v-if="!isShowChecked" @click="switchTap">管理</view> <view v-else @click="switchTap">取消</view> </view> <view class="list"> <checkbox-group @change="checkboxChange"> <view class="item" v-for="(item,index) in visitList" :key="index"> <view class="title"> <checkbox v-if="isShowChecked" :value="item.time" :checked="item.checked" /> <text>{{item.time}}</text> </view> <checkbox-group @change="(e)=>{picCheckbox(e,index)}"> <view class="picList acea-row row-middle"> <view class="picTxt" v-for="(j,jindex) in item.picList" :key="jindex" @click.stop="goDetails(j)"> <view class="pictrue"> <image :src="j.image"></image> <checkbox v-if="isShowChecked" :value="(j.id).toString()" :checked="j.checked" class="checkbox" /> </view> <view class="money">¥<text class="num">{{j.product_price}}</text></view> </view> </view> </checkbox-group> </view> </checkbox-group> <view class='loadingicon acea-row row-center-wrapper'> <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} </view> </view> <view class="footer acea-row row-between-wrapper" v-if="isShowChecked"> <checkbox-group @change="checkboxAllChange"> <checkbox value="all" :checked="isAllSelect" /> <text class='checkAll'>全选</text> </checkbox-group> <view class="acea-row row-middle"> <view class="bnt acea-row row-center-wrapper" @click="collect">收藏</view> <view class="bnt on acea-row row-center-wrapper" @click="del">删除</view> </view> </view> </view> <view class='noCommodity' v-else-if="!visitList.length && page == 1"> <view class='pictrue'> <image src='../../../static/images/noCollection.png'></image> </view> <recommend :hostProduct="hostProduct"></recommend> </view> <home v-if="navigation"></home> </view></template>
Js：
<script> import { getVisitList, getProductHot, deleteVisitList, collectAdd } from '@/api/store.js'; import { mapGetters } from "vuex"; import { toLogin } from '@/libs/login.js'; import recommend from '@/components/recommend'; // #ifdef MP import authorize from '@/components/Authorize'; // #endif import home from '@/components/home'; import colors from '@/mixins/color.js' export default { components: { recommend, // #ifdef MP authorize, // #endif home }, mixins: [colors], data() { return { isShowChecked: 0, count: 0, times: [], isAllSelect: false, hostProduct: [], loadTitle: '加载更多', loading: false, loadend: false, visitList: [], limit: 21, page: 1, isAuto: false, //没有授权的不会自动授权 isShowAuth: false, //是否隐藏授权 hotScroll: false, hotPage: 1, hotLimit: 10, isItemAll: [] }; }, computed: mapGetters(['isLogin']), onLoad() { if (this.isLogin) { this.loadend = false; this.page = 1; this.visitList = []; this.get_user_visit_list(); this.get_host_product(); } else { toLogin(); } }, onShow() { this.times = []; this.loadend = false; this.page = 1; this.visitList = []; this.get_user_visit_list(); }, methods: { goDetails(item){ if(this.isShowChecked) return false; uni.navigateTo({ url: '/pages/goods_details/index?id=' + item.product_id }) }, switchTap(){ this.isShowChecked = !this.isShowChecked; }, collect(){ let ids = []; this.visitList.forEach(item=>{ item.picList.forEach(j=>{ if(j.checked){ ids.push(j.id) } }) }) if(!ids.length){ return this.$util.Tips({ title: '请选择收藏商品' }); } collectAdd(ids).then(res=>{ return this.$util.Tips({ title: res.msg }); }) }, del(){ let ids = []; this.visitList.forEach(item=>{ item.picList.forEach(j=>{ if(j.checked){ ids.push(j.id) } }) }) if(!ids.length){ return this.$util.Tips({ title: '请选择删除商品' }); } deleteVisitList(ids).then(res=>{ this.times = []; this.loadend = false; this.page = 1; this.$set(this, 'visitList', []); this.get_user_visit_list(); return this.$util.Tips({ title: res.msg }); }) }, picCheckbox(event, index) { let that = this, picTime = event.detail.value; that.visitList[index].picList.forEach(j => { if (picTime.indexOf(j.id + '') !== -1) { j.checked = true; } else { j.checked = false; } }) if(that.visitList[index].picList.length == picTime.length){ that.visitList[index].checked = true; }else{ that.visitList[index].checked = false; } let visitObj = []; that.visitList.forEach(item=>{ if(item.checked){ visitObj.push(item.time) }else{ if(visitObj.indexOf(item.time) !== -1){ visitObj.remove(item.time); } } }) if(visitObj.length == that.visitList.length){ that.isAllSelect = true; }else{ that.isAllSelect = false; } }, checkboxChange(event) { let that = this, timeList = event.detail.value; that.isItemAll = timeList; that.visitList.forEach((item, index) => { if (timeList.indexOf(item.time) !== -1) { item.checked = true; } else { item.checked = false; } item.picList.forEach(j => { if (item.checked) { j.checked = true; } else { j.checked = false; } }) }) if (timeList.length === that.visitList.length) { that.isAllSelect = true; } else { that.isAllSelect = false; } }, forGoods(val) { let that = this; if (!that.visitList.length) return that.visitList.forEach((item) => { if (val) { item.checked = true; } else { item.checked = false; } item.picList.forEach(j => { if (val) { j.checked = true; } else { j.checked = false; } }) }) }, checkboxAllChange(event) { let value = event.detail.value; if (value.length) { this.isAllSelect = true; this.forGoods(1) } else { this.isAllSelect = false; this.forGoods(0) } }, // 授权关闭 authColse: function(e) { this.isShowAuth = e }, /** * 获取收藏产品 */ get_user_visit_list: function() { let that = this; if (this.loading) return; if (this.loadend) return; that.loading = true; that.loadTitle = ""; getVisitList({ page: that.page, limit: that.limit }).then(res => { this.count = res.data.count; for (let i = 0; i < res.data.time.length; i++) { if (this.times.indexOf(res.data.time[i]) == -1) { this.times.push(res.data.time[i]) this.visitList.push({ time: res.data.time[i], picList: [] }) } } for (let x = 0; x < this.times.length; x++) { this.visitList[x].checked = this.isAllSelect ? true : false; for (let j = 0; j < res.data.list.length; j++) { if (this.times[x] === res.data.list[j].time_key) { if (this.isAllSelect) { res.data.list[j].checked = true; } else { res.data.list[j].checked = false; } this.visitList[x].picList.push(res.data.list[j]) } } } let loadend = res.data.list.length < that.limit; that.loadend = loadend; that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多'; that.page = that.page + 1; that.loading = false; }).catch(err => { that.loading = false; that.loadTitle = "加载更多"; }); }, /** * 获取我的推荐 */ get_host_product: function() { let that = this; if (that.hotScroll) return getProductHot( that.hotPage, that.hotLimit, ).then(res => { that.hotPage++ that.hotScroll = res.data.length < that.hotLimit that.hostProduct = that.hostProduct.concat(res.data) }); } }, onReachBottom() { if (this.visitList.length) { this.get_user_visit_list(); } else { this.get_host_product(); } } }</script>
Css：
<style lang="scss"> page { background-color: #fff; }
.record .pictrue /deep/checkbox .uni-checkbox-input { background-color: rgba(0, 0, 0, 0.16); } .record .pictrue /deep/checkbox .wx-checkbox-input { background-color: rgba(0, 0, 0, 0.16); }
.record { .footer { box-sizing: border-box; padding: 0 30rpx; width: 100%; height: 96rpx; box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.06); background-color: #fff; position: fixed; bottom: 0; z-index: 30; padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/ padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
.bnt { width: 160rpx; height: 60rpx; border-radius: 30rpx; border: 1rpx solid #ccc; color: #666666;
&.on { border: 1rpx solid var(--view-theme); margin-left: 16rpx; color: var(--view-theme); } } }
.nav { border-bottom: 1rpx solid #eee; color: #999999; font-size: 28rpx; height: 74rpx; padding: 0 30rpx;
.left { color: #333;
.num { color: var(--view-theme); margin: 0 10rpx; } } }
.list { padding-top: 32rpx; padding-bottom: 96rpx;
.item { .title { padding: 0 30rpx; margin-bottom: 34rpx; font-size: 34rpx; font-weight: 600; }
.picList { padding: 0 30rpx 0 12rpx;
.picTxt { margin-left: 18rpx; margin-bottom: 48rpx;
.pictrue { width: 218rpx; height: 218rpx; border-radius: 10rpx; position: relative;
image { width: 100%; height: 100%; border-radius: 10rpx; }
.checkbox { position: absolute; right: 10rpx; top: 14rpx; } }
.money { font-size: 24rpx; color: var(--view-theme); font-weight: 600; margin-top: 15rpx;
.num { font-size: 32rpx; margin-left: 6rpx; } } } } } } }</style>复制代码
最后
如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 ！
免费获取源码地址：http://www.crmeb.com
PHP 学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com
划线
评论
复制
发布于: 刚刚阅读数: 2
CRMEB
关注
还未添加个人签名 2021.11.02 加入
CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步，能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用
评论