【uni-app/微信小程序】预览图片(单张、多张)uni.previewImage()

互联网 2021/4/7 22:08:31

uniapp 实现图片预览 单图预览和多图预览关键点就是调用uni.previewImage({current: index,urls: photoList });如果是单图预览,current对应就是0,urls:必须是单个某一条传入。因为现在预览一张图片,你的current传死就是0.所以urls也必须是字符串形式如果是多图预览,…

uniapp 实现图片预览 单图预览和多图预览

关键点就是调用

uni.previewImage({
	current: index,
	urls: photoList
});

如果是单图预览,current对应就是0,urls:必须是单个某一条传入。因为现在预览一张图片,你的current传死就是0.所以urls也必须是字符串形式

如果是多图预览,current,对应就是在循环图片数据的索引,urls: 是数组形式传入。因为uni.previewImage 要根据 current的索引,来动态匹配urls里面的数据

下面代码演示

单图预览模式

previewImg(photoImg) {
	let imgsArray = [];
	imgsArray[0] = photoImg;
	uni.previewImage({
		current: 0,
		urls: imgsArray
	});
}

多图预览模式

<template>
	<view>
		<view>预览图片</view>
		<view class="photosView">
			<block v-for="(item, index) in photos" :key="index">
				<view class="box"><image :src="item.src" mode="widthFix" @click="previewImage(index)"></image></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			photos: [
				{
					id: '1',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923709&di=dda3e0b4d055c8dfaaaa9168c570983a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170331%2F20170331113141_98c8105e504ff71e68d59a6eaa30bd7e_5.jpeg'
				},
				{
					id: '2',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923711&di=6b8dfec17f7be8213ae23db6e1b7719a&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170509%2F20170509200320_7dacf48b2bcc4b4ab7a0412b333ccb99_6.jpeg'
				},
				{
					id: '3',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807858562&di=262d91cfb1292942a257d17973a4843c&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170303%2F20170303094555_7851ce3d965701f3201d4df2dde56592_8.jpeg'
				},
				{
					id: '4',
					src:
						'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592807923711&di=61c1d93f123d6039af37727812c64456&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170318%2F20170318103604_eea6fa2eab8da83f770158463b7201f7_2.jpeg'
				}
			]
		};
	},
	methods: {
		previewImage(index) {
			let photoList = this.photos.map(item => {
				return item.src;
			});
			uni.previewImage({
				current: index,
				urls: photoList
			});
		}
	}
};
</script>

<style scoped lang="less">
* {
	margin: 0;
	padding: 0;
}
.photosView {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.box {
		width: 30%;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>

js map()的方法

参考:

1、map()方法返回一个新数组,新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。

2、map()方法按照原始数组元素顺序依次处理元素。

注意:

  • map()不会对空数组进行检测。

  • map()不会改变原始数组。

  • map() 函数的作用是对数组中的每一个元素进行处理,返回新的元素。

用法:

array.map(function(item,index,arr){})

item:必须。当前元素的的值。

index:可选。当前元素的索引。

arr:可选。当前元素属于的数组对象。

示例:

const list = ["min","list","do","mo"]
const pro = list.map((item,index,array)=>{ 
	// item 原数组的 每一个元素
	// index 原数组 下标
	// 当前元素属于 的数组对象
	return item + "1"   // 处理后可以返回一个新数组
})
console.log(pro)
 
// 打印结果 (4) ["min1", "list1", "do1", "mo1"]
let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[【uni-app/微信小程序】预览图片(单张、多张)uni.previewImage()]http://www.zyiz.net/tech/detail-153529.html

上一篇:小程序开发

下一篇:【微信小程序】tab选项卡

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程