uniapp相册浏览

怼烎@ 2022-12-18 13:59 272阅读 0赞

<template>
    	<view class="pic">
    		<view class="waterfall">
    			<view v-for="(item, index) in list" :key="index" :data-id='item.id' class="waterItem" @tap="imgTap(item.image_url,list)">
    				<image :src="item.image_url" mode="widthFix"></image>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    export default { 
    	data() { 
    		return { 
    			params: '',
    			list: [],
    		};
    	},
    	onLoad(options) { 
    		this.params = options.id;
    	},
    	onShow() { 
    		let url = '/api/place/placeFishImges';//接口
    		let data = { 
    			id: this.params//参数
    		};
    		this.$request.post(url, data).then(res => { 
    			this.list = res.data;//所有数据给数据区
    		});
    	},
    	methods: { 
    		imgTap(url,list){ 
    			//调用API
    			uni.previewImage({ 
    				current:url,
    				urls:list.map(item=>item.image_url)
    			})
    		}	
    	}
    };
    </script>
    
    <style lang="scss">	
    /* 瀑布流 */
    .waterfall { 
    	width: 95vw;
    	margin: 0 auto;
    	column-count: 2;
    	.waterItem { 
    		width: 330upx;
    		height: 330upx;
    		border: 1px solid #cccccc;
    		border-radius: 10upx;
    		overflow: hidden;
    		margin-bottom: 20upx;
    		image { 
    			width: 330upx;
    			height: 330upx;
    		}
    	}
    }
    
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 调用相机相册/上传/扫码整理

1 调用相机相册 uni.chooseImage({ count: 1, sizeType: ['original

浅浅的花香味﹌/ 2023年10月08日 18:37/ 0 赞/ 12 阅读

相关 uniapp开发小程序之上传图片（拍照或从相册中取）

<view @tap="ChooseImage"> 上传图片 </view> methods:{ ChooseImage() {

墨蓝/ 2023年07月15日 13:29/ 0 赞/ 46 阅读

相关 uniapp相册浏览

<template> <view class="pic"> <view class="waterfall"> <view v-for

怼烎@/ 2022年12月18日 13:59/ 0 赞/ 273 阅读

相关启用目录浏览_浏览目录

启用目录浏览 It's very simple to print a list of all files in a [directory][] using the built

系统管理员/ 2022年12月06日 15:36/ 0 赞/ 316 阅读

相关 java相册_Java简单电子相册

涉及的知识点：GUI界面，事件监听，通过一个简单实例学习一下Java这方面的知识 package myTest; import java.awt.\; import ja

╰半橙微兮°/ 2022年11月04日 00:54/ 0 赞/ 258 阅读

相关相册浏览图片上传服务

1 权限基本的用户权限 <uses-permission android:name="android.permission.READ\_EXTERNAL\_STORAGE

﹏ヽ暗。殇╰゛Y/ 2022年09月14日 11:20/ 0 赞/ 311 阅读

相关文件夹浏览

下面是有问题的代码: / 有问题的程序，不能完成查询。如查询根目录时查询会出错。 / define _CRT_SECURE_NO_W

短命女/ 2022年07月16日 02:21/ 0 赞/ 289 阅读

相关个人相册

![SouthEast][] 我的公众号二维码 ![20180602155409925][] [SouthEast]: /images/20220601

桃扇骨/ 2022年06月01日 03:52/ 0 赞/ 276 阅读

相关 uniapp 电商app 实现长按图片保存到本地相册功能

保存图片到本地相册uni.saveImageToPhotoAlbum 最近app需要一个保存图片到本地的功能，通过uniapp官网，可以查看到有一个方法： [unia

迷南。/ 2021年07月25日 18:45/ 0 赞/ 1495 阅读

相关 uniapp 拍照或者选择相册图片后通过阿里OSS生成网络图片

本地图片生成网络图片需求：从本地相册或者拍摄图片后，直接通过OSS存储生成网络图片。 async chooseImage(){ let _this

╰半橙微兮°/ 2021年07月25日 13:03/ 0 赞/ 792 阅读