小程序实现图片放大预览功能

kq-blue

已于 2022-12-27 11:36:29 修改

阅读量579

点赞数

分类专栏：开发中遇到的问题文章标签：小程序前端 uni-app

于 2022-12-27 11:24:09 首次发布

本文链接：https://blog.csdn.net/m0_55074611/article/details/128453333

版权

开发中遇到的问题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

uniapp 微信小程序实现图片放大预览功能
请添加图片描述

实现效果图如下
请添加图片描述

主要实现代码


<view class="text_img">
	<image :src="item" @click="imgClick(item)" mode=""></image>
</view>
<script>
	export default {
		data() {
			return {
				shareList: [
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg40gSTr0YvQaWkY5bZk4S8MF2ENK0YMpkHVkwgBfubJRovHdgyV1vKfA/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg4jl2ITR5YnOVJXRYYToYmiaZTibvyDUKic07uy9I8NDuibzcg2vnoX6POOA/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg49ibEq2Lrqp9hJErpXrw3gTNBNxn6EMCd3mALgcg2RlicBib9Ylw58xicDQ/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg4hMUzq51icxEV7PwiakGadkzPflFsjeF9gM8LC83oj7Ra2AeMJ3PlF7Bg/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg44sNde6Dq4uL7Am78DDnATcdJx3306uMFIIu8HhWtB6xo0wlbkiaK9pQ/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg4srJpiavQIrmoE9wiaOB0sASVBaQ2ibp4BicKDUeWJn6CDBlm0x300uexibg/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg43IKTniamkjkRgpFQVgMQib1mGICuNZGhSFytwP4zXW4WiaySMhyyECmBA/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg4vs4ic5iaUkKA2w5C1yCk4u8XzVKL5N4EkDNJvWf8XUdA2pFysUQUyNGw/0?wx_fmt=jpeg",
					"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg42z8BVdsmyFr5fSPbhgeaT44z0lIKRbTICV7zEu102cWDDibSibujbQgA/0?wx_fmt=jpeg",
				],
				item:"http://mmbiz.qpic.cn/mmbiz_jpg/mKibiaIbsxoOH7TyHRWdMSN04kJGrVesg4jl2ITR5YnOVJXRYYToYmiaZTibvyDUKic07uy9I8NDuibzcg2vnoX6POOA/0?wx_fmt=jpeg",
			}
		},
		methods: {
			imgClick(shareList,itemImg){
				//arr必须是一个数组，current是当前选中的图片,可传下标或地址
				uni.previewImage({
					urls:this.shareList,
					longPressActions:{
						itemList: [ "发送给朋友",'保存图片',"收藏"],
					},
					current:itemImg,
					success: function(res) {
						console.log(res,"res1")
					},
					fail: function(err) {
						console.log(err,"err")
					},
					complete: function(comp) {
						console.log(comp,"comp")
					},
				})
			},
		},
	}
</script>