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

怼烎@ 2024-03-22 14:55 53阅读 0赞

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

#### 文章目录 ####

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

![在这里插入图片描述][37661052b3c3494792cdccf8885bb7d4.png_pic_center]

##### 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>

![在这里插入图片描述][5413205553574383ae78d8ed62a31aa2.png_pic_center]

效果还行

编写选中逻辑

<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
    			}
    		},

效果

![在这里插入图片描述][9f764a9499d44e828b41bea783abb930.png_pic_center]

![在这里插入图片描述][635bd5523ebd4319acc0581ec257ab43.png_pic_center]

![在这里插入图片描述][3ebb893b002748b687ef603671773e4e.png_pic_center]

没毛病。

[37661052b3c3494792cdccf8885bb7d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a5e4bf079f824643958092c1cda210fc.png
[5413205553574383ae78d8ed62a31aa2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c91322017d4a4ddc847ae6a51296d8de.png
[9f764a9499d44e828b41bea783abb930.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/80784f9522574f40a6970412d815a33f.png
[635bd5523ebd4319acc0581ec257ab43.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e74bc22a69794dd9b7b3860d015ccdfc.png
[3ebb893b002748b687ef603671773e4e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0652de043dea4f9bb02d2631d5d704e2.png