瀑布图实现点击全屏预览效果
发布于 7 年前 作者 xxie 11396 次浏览 来自 问答

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

// 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 回复

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

回到顶部