支付宝小程序:查看大图,图片的缩放功能


需求:点击商品详情图,可以查看大图,并且可以进行缩放,还能左右滑动查看上下页

1.使用自带的my.previewImage功能

官网:https://opendocs.alipay.com/mini/api/media/image/my.previewimage

<button type="primary" onTap="bigImg"> Button </button>

bigImg(){
  my.previewImage({
    current: 0, // 初始化展示第几张图片
    urls: [
      'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
      'https://img.alicdn.com/tps/TB1pfG4IFXXXXc6XXXXXXXXXXXX.jpg',
      'https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg'
    ],
  });
}

2.使用enlarge-image插件 – 坑

官网:https://opendocs.alipay.com/mini/quickexample/image-enlargement
坑:1.不支持缩放 2.不能左右切换查看其它图片
例子查看官网
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值