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


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

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.不能左右切换查看其它图片
例子查看官网
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u012570307/article/details/121568132
今日推荐