背景:
在使用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);}}});