知识学堂 > 课程 > 小程序点击图片放大

小程序点击图片放大

发布日期:2020/9/15 来源:聚恒【返回】


        <view wx:if='{{item.field1!=""}}class="PicList"
          style="background: url({{item.field1}}) no-repeat center center; background-size: cover;">
          <image bindtap="imgYudata-bean="{{item.field1}}"
            data-list="{{item.field1}},{{item.field2}},{{item.field3}},{{item.field4}},{{item.field5}},{{item.field6}},{{item.field7}},{{item.field8}},{{item.field9}}"
            data-src="{{item.field1}}src="{{item.field1}}mode="widthFix"></image>
        </view>
 wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: [src// 一张图的时候这里需要这样转换 ,需要预览的图片http链接列表
    })

//图片点击事件
  imgYu: function (event) {
    var $aa = event.currentTarget.dataset;
    var newarray = $aa.list.split(",");
    console.log("获取数组前:" + newarray);
    for (var i = 0; i < newarray.length; i++{
      if (newarray[i== ""{
        newarray.splice(i);
      }
    }
    console.log("获取数组后:" + newarray);
    var src = event.currentTarget.dataset.src; //获取data-src
    // var imgList = event.currentTarget.dataset.list;//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: newarray // 需要预览的图片http链接列表
    })
  },