收藏
回答

瀑布图实现点击全屏预览效果

瀑布图如何实现点击全屏预览:

// pages/map/index.js

let col1H = 0;

let col2H = 0;

Page({

data: {


images: [],

col1: [],

col2: [],

},

onLoad: function (options) {

wx.showToast({

title: "页面加载中...",

icon: 'loading',

duration: 2000,

});


wx.getSystemInfo({

success: (res) => {

let ww = res.windowWidth;

let wh = res.windowHeight;

let imgWidth = ww * 0.48;

let scrollH = wh;


this.setData({

scrollH: scrollH,

imgWidth: imgWidth

});


this.loadImages();

}

})


},

onImageLoad: function (e) {

let imageId = e.currentTarget.id;

let oImgW = e.detail.width;  //图片原始宽度

let oImgH = e.detail.height;   //图片原始高度

let imgWidth = this.data.imgWidth; //图片设置的宽度

let scale = imgWidth / oImgW;  //比例计算

let imgHeight = oImgH * scale;  //自适应高度


let images = this.data.images;

let imageObj = null;


for (let i = 0; i < images.length; i++) {

let img = images[i];

if (img.id === imageId) {

imageObj = img;

break;

}

}


imageObj.height = imgHeight;

let loadingCount = this.data.loadingCount - 1;

let col1 = this.data.col1;

let col2 = this.data.col2;


if (col1H <= col2H) {

col1H += imgHeight;

col1.push(imageObj);

} else {

col2H += imgHeight;

col2.push(imageObj);

}


let data = {

loadingCount: loadingCount,

col1: col1,

col2: col2

};


if (!loadingCount) {

data.images = [];

}


this.setData(data);

},


loadImages: function () {

let images = [

{ pic: "https://7765-1", height: 0 },

{ pic: "https://7765-2", height: 0},

{ pic: "https://7765-3", height: 0}‘

{ pic: "https://7765-4", height: 0}


let baseId = "img-" + (+new Date());

for (let i = 0; i < images.length; i++) {

images[i].id = baseId + "-" + i;

}

this.setData({

loadingCount: images.length,

images: images

});

},


previewImg1: function(e) {  //如何在这里实现点击全屏预览呢?

this.loadImages();

var images = this.data.images;

console.log(this.data.images);

wx.previewImage({

urls: images,

})




}





})


回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    2018-10-18

    你不都写完了吗?差个current ,你点击事件里绑定个index,找到对应的图呗

    2018-10-18
    有用
    回复 5
    • ༺文山痕月༻
      ༺文山痕月༻
      2018-10-19

      到这里就不知道怎么写了,能赐教一下代码吗?


      2018-10-19
      回复
    • 卢霄霄
      卢霄霄
      2018-10-19回复༺文山痕月༻

      只预览这一张图的话,直接 data-src="{{item.pic}}",然后在previewImg 方法里取到这个src就行啦,urls=[这个值]

      2018-10-19
      回复
    • ༺文山痕月༻
      ༺文山痕月༻
      2018-10-19回复卢霄霄

      <view class="img_item">

      <view wx:for="{{col2}}" wx:key="id">

      <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"   bindtap='previewImg1'></image>

      </view>

      </view>


      2018-10-19
      回复
    • ༺文山痕月༻
      ༺文山痕月༻
      2018-10-19回复༺文山痕月༻

      具体怎么写了。都没有反应。


      2018-10-19
      回复
    • 卢霄霄
      卢霄霄
      2018-10-19回复༺文山痕月༻

      image标签里加个属性 data-src="{{item.pic}}"

      previewImg1: function(e){

          let src = e.currentTarget.dataset.src

          wx.previewImage({

              urls:[src]

          })

      }

      2018-10-19
      回复
登录 后发表内容