瀑布图如何实现点击全屏预览:
// 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,
})
}
})
微信小程序开发问题解答
微信小程序开发者回答:
你不都写完了吗?差个current ,你点击事件里绑定个index,找到对应的图呗
微信小程序开发者回答:
到这里就不知道怎么写了,能赐教一下代码吗?
微信小程序开发者回答:
只预览这一张图的话,直接 data-src="{{item.pic}}",然后在previewImg 方法里取到这个src就行啦,urls=[这个值]
微信小程序开发者回答:
微信小程序开发者回答:
具体怎么写了。都没有反应。
微信小程序开发者回答:
image标签里加个属性 data-src="{{item.pic}}"
previewImg1: function(e){
let src = e.currentTarget.dataset.src
wx.previewImage({
urls:[src]
})
}
本文网址:http://www.91bianli.com/kaifazhinan/75308.html