【项目】UniApp实战多端企业网盘全栈开发 22 图片预览功能

缺乏、安全感 2024-03-22 15:25 10阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  22 图片预览功能

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

##### 22 图片预览功能 #####

先是修改`f-list.vue` 组件，因为现在还没有任何点击事件

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

先来个点击效果

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

同样还有那个`+` 和 `三个点更多`的点击效果

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

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

没问题

现在就该添加点击事件了

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

传到父组件进行处理

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

编写方法处理事件

先修改一下现有数据列表

list: [{
        
    						type: "dir",
    						name: "我的笔记",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
        
    						type: "image",
    						name: "风景.jpg",
    						data: "/static/logo.png",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    
    					{
        
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
        
    						type: "image",
    						name: "风景.jpg",
    						data: "/static/logo.png",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
        
    						type: "text",
    						name: "记事本.txt",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
        
    						type: "image",
    						name: "风景.jpg",
    						data: "/static/logo.png",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
        
    						type: "none",
    						name: "压缩包.rar",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					}
    				],

事件【当然现在的图片还是写死的，就本地的静态资源文件】

// 列表点击事件处理
    			doEvent(item) {
        
    				switch (item.type) {
        
    					case 'image': // 预览图片
    						let images = this.list.filter(item => {
        
    							return item.type === 'image'
    						})
    						uni.previewImage({
        
    							current: item.data,
    							urls: images.map(item => item.data)
    						})
    						break;
    					default:
    						break;
    				}
    			},

看看效果

![在这里插入图片描述][9a67f2cb115b4ad390fbb8063105e5f6.gif_pic_center]

还不错。【当然现在点击其他类型的文件还没有效果】

真机则是下面这种效果

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

[7e346eb371ff4341af2a3060fe4677ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9d4407a0cdab47d58395ef485ddc1ffe.png
[3a423c829bc9440db75480008e27714e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/42a027a866bb40038f941a4dc9d32405.png
[1ba927634a9142c19148ad3722285e1a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e6e539f37c9d4e09b4b11519c6c1e5ac.png
[008ac50c55e548d885800703f6c1a4a3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b04b50cba7a446ad8c3f6fded1014d73.png
[bb1471c3ba8f44aab66a4c011a2160e7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2733b3acb51241bfbc72ac0df29ef6c4.png
[4c0f6c9ebaaf45fdb73a3a73d6523871.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/32deeaa951474583816fd1313c1a9654.png
[a5fd152e965e461aa04c97a33cac8417.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/89c47fedb4444c2eb6060e982a7251a3.png
[9a67f2cb115b4ad390fbb8063105e5f6.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/203eb3304cc94bb7a53cd5f2067274f5.png
[a25c9590524044198295244a21450006.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3143b0b7d7804250b5500b2ed32e7b3c.png