【项目】UniApp实战多端企业网盘全栈开发 15 多选操作开发【四】底部操作条

向右看齐 2024-03-22 14:55 67阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  15 多选操作开发【四】底部操作条

![在这里插入图片描述][38b4d778a7e140cb813e1a39b0ba7235.png_pic_center]

##### 15 多选操作开发【四】底部操作条 #####

`index.vue`

<view style="height: 115rpx;" class="flex align-stretch bg-primary text-white">
    			<view class="flex-1 flex flex-column align-center justify-center" style="line-height: 1.5;" v-for="(item,index) in actions" :key="index">
    				<text class="iconfont" :class="item.icon"></text>
    				{
       {item.name}}
    			</view>
    		</view>

actions: [{
        
    						icon: "icon-xiazai",
    						name: "下载"
    					},
    					{
        
    						icon: "icon-fenxiang-1",
    						name: "分享"
    					},
    					{
        
    						icon: "icon-shanchu",
    						name: "删除"
    					},
    					{
        
    						icon: "icon-chongmingming",
    						name: "重命名"
    					}
    				],

效果

![在这里插入图片描述][99afc17a6b07418292239e4696b8f2ef.png_pic_center]

点击效果，

![在这里插入图片描述][2fd142b641564307a31693f9a0988baf.png_pic_center]

固定在底部

![在这里插入图片描述][086559c6993f422fb6a04501fc24bbab.png_pic_center]

重新做一下actions，在选中1 个以上时，只有下载和删除

做成一个计算属性：

// 操作菜单
    			actions() {
        
    				if (this.checkCount > 1) {
        
    					return [{
        
    						icon: "icon-xiazai",
    						name: "下载"
    					}, {
        
    						icon: "icon-shanchu",
    						name: "删除"
    					}]
    				}
    				return [{
        
    					icon: "icon-xiazai",
    					name: "下载"
    				}, {
        
    					icon: "icon-fenxiang-1",
    					name: "分享"
    				}, {
        
    					icon: "icon-shanchu",
    					name: "删除"
    				}, {
        
    					icon: "icon-chongmingming",
    					name: "重命名"
    				}]
    			}

![在这里插入图片描述][227a8792205b486e8fbb59c3c418de53.png_pic_center]

data 里面就不要了

![在这里插入图片描述][554804ad308e45a28c383c5a3e835ff0.png_pic_center]

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

这里浏览器显示有些问题，它会把tabbar 给一起遮住了

真机是没有这个问题的

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

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

OK。

[38b4d778a7e140cb813e1a39b0ba7235.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/86a3b61a43f64dda99c884285cb58267.png
[99afc17a6b07418292239e4696b8f2ef.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3eb8293c664b4c2da4e7568baf837f28.png
[2fd142b641564307a31693f9a0988baf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e2bb6852533640c1b3f70e512dee0a0d.png
[086559c6993f422fb6a04501fc24bbab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f1a077db154e468681cec03ca2bcf8c4.png
[227a8792205b486e8fbb59c3c418de53.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2d0ce345b10b4dcc8b461af198aecf3d.png
[554804ad308e45a28c383c5a3e835ff0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/55658a530dce4954a5a5243ff0024f27.png
[a5d2bd83d068427a8264dda8e9890653.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0e8f273629dd4d78b7ea5c082bd337ca.png
[e0e1a0321e104c0d83e7104a376897b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c34c8338135a4582892c5c4c708abb3b.png
[f0794dcaad1e4114bf682651ef3c4732.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/223e7da26e684223b8e9b11526230ae5.png