【项目】UniApp实战多端企业网盘全栈开发 20 弹出添加操作条

ゞ浴缸里的玫瑰 2024-03-22 15:25 14阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  20 弹出添加操作条

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

##### 20 弹出添加操作条 #####

就导航栏的那个`+` 号

给`+` 按钮加上点击事件

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

引入并注册unipopup 组件

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

添加组件

<uni-popup ref="add"  type="bottom">
    			123
    		</uni-popup>

编写方法

// 打开添加操作条
    			openAddDialog() {
        
    				this.$refs.add.open()
    			}

看看效果

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

当然浏览器还是显示有些问题，真机是下面这样的

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

OK，继续做

添加列表数据：

addList: [{
        
    					icon: "icon-file-b-6",
    					color: "text-success",
    					name: "上传图片"
    				}, {
        
    					icon: "icon-file-b-9",
    					color: "text-primary",
    					name: "上传视频"
    				}, {
        
    					icon: "icon-file-b-8",
    					color: "text-muted",
    					name: "上传文件"
    				}, {
        
    					icon: "icon-file-b-2",
    					color: "text-warning",
    					name: "新建文件夹",
    				}]

操作条

<uni-popup ref="add" type="bottom">
    			<view class="bg-white flex" style="height: 200rpx;">
    				<view class="flex-1 flex align-center justify-center flex-column" hover-class="bg-light" v-for="(item,index) in addList" :key="index">
    					<text style="width: 110rpx; height: 110rpx;"
    						class="rounded-circle bg-light iconfont flex align-center justify-center" :class="item.icon + ' ' + item.color" ></text>
    					<text class="font text-muted">{
       {item.name}}</text>
    				</view>
    			</view>
    		</uni-popup>

效果

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

没问题 。当然这是浏览器，它把tabbar 一起遮住了

真机效果是下面这样的

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

[14178f38c4f04bb8b69af3078920d37a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/eeb3280ed3ed46648626797155b40108.png
[fcaf52e6c9064dfa90e2871487e99f68.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/42a5a661f9e84cfbb3b7f6e1e730ac24.png
[24b129689fcb4b11a4439af10e881156.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/15818183acca4cab9412e2fd2caddf76.png
[124604e6f5c648e2a9a34ed3a2988489.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e96ec0f226164630ba26f2b7e97d120d.png
[e38e0853a0b646fe8b9baa1da429aabf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3d0bf59deb7e476b826201440ea399fd.png
[7acdb6d1899a4f48af8da43888d260ca.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/57b2465386a5409c85c77a38e01a5ca9.png
[17ec1e2c5f894bc08e2d32918459fa3f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4d32ba43043a47bd87a26192e925b3fd.png