uniapp点击预览图片，两种效果

本文主要是介绍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);}}});

这篇关于uniapp点击预览图片，两种效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---