141 lines
3.5 KiB
JavaScript
141 lines
3.5 KiB
JavaScript
// mycomponent/Waterfalls_flow.js
|
||
var colOneHeight = 0;
|
||
var colTwoHeight = 0;
|
||
Component({
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
properties: {
|
||
goodsData: {
|
||
type: null
|
||
},
|
||
handleTag: {
|
||
value:false,
|
||
type:null
|
||
},
|
||
notap:{
|
||
value:false,
|
||
type:Boolean
|
||
}
|
||
},
|
||
|
||
lifetimes: {
|
||
attached: function() {
|
||
// 在组件实例进入页面节点树时执行
|
||
colOneHeight = 0;
|
||
colTwoHeight = 0;
|
||
},
|
||
},
|
||
observers:{
|
||
'goodsData': function(goodsData) {
|
||
this.data.imgCount = 0;
|
||
// 修改部分
|
||
// 判断是数据中的对象列表是否完全相同
|
||
let isRepeat = goodsData.every((item,index) => {
|
||
return JSON.stringify(item) == JSON.stringify(this.data.activitys[index])
|
||
});
|
||
if(this.data.handleTag){
|
||
this.setData({
|
||
activitys: [],
|
||
activitys1: [],
|
||
activitys2: [],
|
||
});
|
||
}
|
||
|
||
if (goodsData.length > 0 && isRepeat) {
|
||
// image组件在src的地址相同的情况下，不会触发load事件， 延迟赋值，让DOM层重新渲染
|
||
setTimeout(() => {
|
||
this.setData({activitys: goodsData})
|
||
}, 500);
|
||
} else {
|
||
this.setData({activitys: goodsData})
|
||
}
|
||
// 修改部分
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {
|
||
activitys: [],
|
||
activitys1: [],
|
||
activitys2: [],
|
||
showLoading: false,
|
||
imgCount: 0
|
||
},
|
||
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
jumpDetails(e) {
|
||
if(this.data.notap) return;
|
||
let stick_id = e.currentTarget.dataset.stickid;
|
||
wx.navigateTo({
|
||
url: '/packageC/micro_communities/microCommentDetails/microCommentDetails?stickId=' + stick_id
|
||
});
|
||
},
|
||
onImageError(options) {
|
||
// let currentId = options.currentTarget.id;
|
||
console.log("图片加载发生错误");
|
||
this.onImageLoad({
|
||
currentTarget: {
|
||
id: options.currentTarget.id
|
||
},
|
||
detail: {
|
||
width: 160,
|
||
height: 160
|
||
},
|
||
type: 'error'
|
||
});
|
||
},
|
||
/**
|
||
* 图片加载函数
|
||
* 图片加载完成后，根据图片的高度，依次往第一列和第二列中推入数据
|
||
*/
|
||
onImageLoad(options) {
|
||
let currentId = options.currentTarget.id;
|
||
let imageWidth = options.detail.width; // 图片宽度
|
||
let imageHeight = options.detail.height; // 图片高度
|
||
let activitys = this.data.activitys; // 获取所有的数据资源
|
||
let activityObj = null;
|
||
let scle = (imageWidth / imageHeight);
|
||
|
||
for (let i = 0; i < activitys.length; i++) {
|
||
if (activitys[i].id == currentId) {
|
||
if(options.type == 'error'&&activitys[i].has_many_image[0]){
|
||
activitys[i].has_many_image[0].url = "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img_404.png";
|
||
}
|
||
activityObj = activitys[i];
|
||
break;
|
||
}
|
||
}
|
||
|
||
this.data.imgCount += 1;
|
||
let activitys1 = this.data.activitys1;
|
||
let activitys2 = this.data.activitys2;
|
||
|
||
if (colOneHeight <= colTwoHeight) {
|
||
colOneHeight += (176 / scle) + 60;
|
||
activitys1.push(activityObj);
|
||
} else {
|
||
colTwoHeight += (176 / scle) + 60;
|
||
activitys2.push(activityObj);
|
||
}
|
||
|
||
let data = {
|
||
activitys1: activitys1,
|
||
activitys2: activitys2
|
||
};
|
||
if (this.data.imgCount >= this.data.activitys.length) {
|
||
this.setData({
|
||
showLoading: true
|
||
});
|
||
}
|
||
|
||
this.setData(data);
|
||
},
|
||
}
|
||
});
|