uni-app 购物车全选案例

最新推荐文章于 2024-05-18 08:57:21 发布

不知道起啥名啊啊

最新推荐文章于 2024-05-18 08:57:21 发布

阅读量803

点赞数 1

分类专栏： uni-app 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_57660141/article/details/126165756

版权

uni-app 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先可以看下：购物车小案例

如果选中全部的商品，那么最下面的全选按钮也会选中；如果有没有选中的商品，最下面的全选按钮不会被选中；如果你直接选中全选按钮，上面的商品也会被选中，取消全选按钮，上面的商品也会全部取消

html代码


		<view class="box1 flexA" @click="allSelect">
			<view class="">
				<image v-if="allStatus" src="/static/yes.png" mode=""></image>
				<image v-else src="/static/noCur.png" mode=""></image>
                <!-- computed实现--!>
				<!-- <image v-if="allSelected" src="/static/yes.png" mode=""></image>
				<image v-else src="/static/noCur.png" mode=""></image> -->
			</view>
			<view class="" >
				全选
			</view>
		</view>

methods实现

先过滤出status为true的商品，放到一个新数组中，然后判断新数组的长度是否与原数组的长度相等，

如果相等，说明全部商品都被选中，那么最下面的全选按钮也要选中，就把allStatus的值改为false，然后给原数组中的每个status也要赋值为false

data() {
			return {
				num: 0,
				list: [{
					name: '奥特曼1',
					num: 6,
					price: 50,
					id: 1,
					status: false,
				}, {
					name: '奥特曼2',
					num: 5,
					price: 30,
					id: 2,
					status: false,
				}, {
					name: '奥特曼3',
					num: 8,
					price: 16,
					id: 3,
					status: false,
				}],
				allStatus:false
			}
		},
		methods: {
			toggleStatus(item, index) {
				arr.length==this.list.length?this.allStatus=true:this.allStatus=false
			},

			allSelect(){
				let arr = this.list.filter(item=>item.status)
				if (arr.length != this.list.length) {
					this.allStatus=true
					this.list.forEach(item=>item.status =true)
				} else{
					this.allStatus=false
					this.list.forEach(item=>item.status =false)
				}
				
			}
			
		},

computed实现

利用计算属性，也是判断新数组的长度与原数组的长度是否相等，相等就全选按钮亮

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

也就是判断list中的status是否都为true，然后给flag取反，那就是false，遍历给list数组

methods: {
			allSelect(){
				let flag = this.list.every(item=>item.status)
				this.list.forEach(item=>item.status =!flag)
			}
		},
computed:{
				allSelected(){
					let arr = this.list.filter(item=> item.status)
					return arr.length==this.list.length
					//也可以这么写
					// return this.list.every(item=>item.status)
				}
		},