uniapp点击预览图片，两种效果
背景：
在使用uniapp框架中，我们对图片的展示需要点击放大展示(单张)；如果是多张图片，要支持左右滑动查看多张图片(多张)。
官网链接：点击跳转官网
一、单张，点击放大
代码：
<template>
<u--image :src="personPicUrl" width="100px" height="100px"@click="imgPreview(personPicUrl)"></u--image>
</template><script>
export default {name: "imageDetail",data() {return {personPicUrl: '',}},methods: {imgPreview(url) {uni.previewImage({urls: [url]})},},
</script>核心代码：
//图片预览，封装方法
imgPreview(url) {uni.previewImage({urls: [url]})},二、多张，点击放大并左右滑动
代码：
<template><u--image v-for="(item, index) in imgsData" :key="index" :src="item.img" width="142rpx"height="104rpx" radius="4" @click="imgPreview(item.img)"></u--image>
</template><script>
export default {name: "imageDetail",data() {return {imgsData: [],}},methods: {imgPreview(url) {let arr = []this.imgsData.forEach((item, index) => {if (item.img) {arr.push(item.img)}})let index = arr.findIndex(value => value == url)uni.previewImage({current: index,urls: arr,});},},
</script>核心代码：
//多张图片，可以左右滑动
imgPreview(url) {let arr = []this.imgsData.forEach((item, index) => {if (item.img) {arr.push(item.img)}})let index = arr.findIndex(value => value == url)uni.previewImage({current: index,urls: arr,});}效果展示：
三、其它
长按图片，的效果
uni.previewImage({current: index,urls: arr,longPressActions: {itemList: ['发送给朋友', '保存图片', '收藏'],success: function(data) {console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');},fail: function(err) {console.log(err.errMsg);}}});