【项目】UniApp实战多端企业网盘全栈开发 13 多选操作开发【二】-CSDN博客

本文链接：https://blog.csdn.net/weixin_44226181/article/details/130609945

该文章介绍了在UniApp项目中实现多选操作功能，包括当选中文件后导航栏的动态变化。通过Vue的条件渲染模板和计算属性来管理选中状态和数量，展示已选中的文件数量，并提供取消和全选的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【项目】UniApp实战多端企业网盘全栈开发

文章目录

- 【项目】UniApp实战多端企业网盘全栈开发
- - - 13 多选操作开发【二】

在这里插入图片描述

13 多选操作开发【二】

现在实现一下选中之后，导航栏进行对应改变的效果

index.vue

			<!-- 有选中 -->
			<template>
				<view slot='left' class="font-md ml-3 text-primary">取消</view>
				<text class="font-md font-weight-bold">已选中1个</text>
				<view slot='right' class="font-md mr-3 text-primary">全选</view>
			</template>

在这里插入图片描述

效果还行

编写选中逻辑

		<nav-bar>
			<!-- 未选中状态 -->
			<template v-if="checkCount === 0">
				<text slot='left' class="font-md ml-3">首页</text>
				<template slot='right'>
					<view style="width: 60rpx;height: 60rpx;"
						class="flex align-center justify-center bg-light rounded-circle mr-3">
						<text class="iconfont icon-zengjia"></text>
					</view>
					<view style="width: 60rpx;height: 60rpx;"
						class="flex align-center justify-center bg-light rounded-circle mr-3">
						<text class="iconfont icon-gengduo"></text>
					</view>
				</template>
			</template>

			<!-- 有选中 -->
			<template v-else>
				<view slot='left' class="font-md ml-3 text-primary">取消</view>
				<text class="font-md font-weight-bold">已选中{{checkCount}}个</text>
				<view slot='right' class="font-md mr-3 text-primary">全选</view>
			</template>
		</nav-bar>

计算属性

		computed: {
			// 选中列表
			checkList() {
				return this.list.filter(item => item.checked)
			},
			// 选中数量
			checkCount() {
				return this.checkList.length
			}
		},