微信小程序图片预览

最新推荐文章于 2024-11-02 20:12:59 发布

加班是不可能的，除非双倍日工资

最新推荐文章于 2024-11-02 20:12:59 发布

阅读量161

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_45591772/article/details/105663747

版权

1、单张预览

<view class='top'>
    <image src="{{discount.imgPath}}"  bindtap='imgYu'></image>
  </view>

//图片点击事件
  imgYu: function (event) {
    var that=this;
    var src = that.data.discount.imgPath;//获取data-src
    var imgList = [that.data.discount.imgPath];//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },

2、多张图片预览

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:{{swiperHeight}}rpx;position:relative;' bindchange="change" indicator-color="#fff" indicator-active-color="#dcb236">
      <swiper-item  wx:for="{{imgUrls}}" wx:key>
        <!-- 主要是下面这行呀 -->
        <image src="{{item}}" class="slide-image"  mode='widthFix' data-list="{{item}}" data-src="{{item}}"  bindtap='imgYu'/>
      </swiper-item>
    </swiper>

//轮播图点击预览
  imgYu: function (event) {
    var that = this;
    var src = event.currentTarget.dataset.src;//获取data-src
    var imgList = that.data.imgUrls;//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },