uniapp里面点击图片放大图片

需求:小程序里面的图片需要点击有阅览功能

思路:利用wx.previewImage实现图片预览功能

//直接在需要展示的图片加点击事件
<image class="logo" src="/static/logo.png" @click="clickImg"></image>

/**
 * 点击发大图片
 * @param {图片url} url
 */
clickImg(url) {
  wx.previewImage({
    urls: [url], //接受的是一个数组,默认展示第一张
    current: "",
    success: function (res) {},
    fail: function (res) {},
    complete: function (res) {},
  });
},

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp中,想要实现点击图片放大的效果,可以通过以下步骤实现: 1. 在页面中引入需要放大图片,并添加一个点击事件。 2. 在事件的回调函数中,使用uniapp提供的API将点击图片路径传递给一个全屏显示的页面。 3. 在全屏显示的页面中,通过获取传递过来的图片路径,在页面上显示大图。 4. 添加一个点击事件,当用户点击图片的时候,关闭全屏显示的页面,回到原来的页面。 具体步骤如下: 1. 在需要放大图片所在的页面中添加如下代码: ```html <template> <view> <image @click="showFullScreenImage" src="path/to/image.png"></image> </view> </template> ``` 2. 在 methods 中添加 showFullScreenImage 方法: ```javascript methods: { showFullScreenImage() { uni.navigateTo({ url: '/pages/fullScreenImage?imagePath=path/to/image.png' //将图片路径作为参数传递给全屏显示的页面 }) } } ``` 3. 在全屏显示的页面 fullScreenImage 中添加如下代码: ```html <template> <view> <image @click="closeFullScreenImage" :src="imagePath"></image> </view> </template> ``` 4. 在 methods 中添加 closeFullScreenImage 方法: ```javascript methods: { closeFullScreenImage() { uni.navigateBack() //关闭全屏显示的页面,返回原来的页面 } }, mounted() { this.imagePath = this.$route.query.imagePath //在页面加载时获取传递过来的图片路径 } ``` 通过以上步骤,当用户点击图片时会打开全屏显示的页面,显示原始大小的图片。当用户点击全屏图片时,会关闭全屏显示的页面,回到原来的页面。这样就实现了点击图片放大的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值