cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-11 20:59:30 +08:00
Code Issues Activity

fix: 修复图库瀑布流bug

Browse Source
This commit is contained in:
小莫唐尼
2024-07-05 17:41:39 +08:00
parent ce60c334ec
commit d4ccc9b7d6
2 changed files with 234 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tm-vuetify/components/tm-flowLayout-custom/tm-flowLayout-custom.vue
+219
View File
@@ -0,0 +1,219 @@
<template>
<view class="tm-flowLayout relative">
<view class="tm-flowLayout-hidden absolute fulled">
<view v-for="(item, index) in list2" :key="index" style="width: 350rpx;" :class="'tm-flowLayout-hidden-'+index">
<tm-images @error="loadimg($event,false,index)" @load="loadimg($event,true,index)" :src="item.spec.url"></tm-images>
</view>
</view>
<view class="tm-flowLayout-cm flex-between">
<view class="tm-flowLayout-left" style="width: 48.6%;">
<block v-for="(item, index) in dataList[0]" :key="index">
<view @click.stop="onclick(index,0)" class="tm-flowLayout-item mb-20 fulled" :class="['tm-flowLayout-item_'+index]">
<tm-translate animation-name="fadeUp">
<view class="card round-3 overflow white">
<tm-images :previmage="false" :src="item.spec.url"></tm-images>
</view>
</tm-translate>
</view>
</block>
</view>
<view class="tm-flowLayout-right" style="width: 48.6%;">
<block v-for="(item, index) in dataList[1]" :key="index">
<view @click.stop="onclick(index,1)" class="tm-flowLayout-item mb-20 fulled" :class="['tm-flowLayout-item_'+index]">
<tm-translate animation-name="fadeUp">
<view class="card round-3 overflow white">
<tm-images :previmage="false" :src="item.spec.url"></tm-images>
</view>
</tm-translate>
</view>
</block>
</view>
</view>
<view v-if="isLoading" class="flex-shrink fulled">
<tm-loadding></tm-loadding>
</view>
</view>
</template>
<script>
/**
* 瀑布流组件
* @property {Function} click 点击项目时触发
* @property {Function} load 当前列表加载完成发出的事件。
* @property {String} model = [rank|desc] desc下正时排序，所有加载完成再进行显示,rank随机，哪个先加载哪个先排前面。
*/
import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
import tmLoadding from "@/tm-vuetify/components/tm-loadding/tm-loadding.vue"
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
import tmTranslate from "@/tm-vuetify/components/tm-translate/tm-translate.vue"
export default {
components: {tmImages, tmLoadding, tmIcons, tmTranslate},
name: 'tm-flowLayout',
props: {
model: {
type: String,
default: 'rank' //desc下正时排序，所有加载完成再进行显示,rank随机，哪个先加载哪个先排前面。
}
},
data() {
return {
list2: [],
dataList: [
[], []
],
colHeight: [0, 0],
minWidth: 0,
isLoading: true,
};
},
async mounted() {
let p = await this.$Querey('.tm-flowLayout-left').catch(e => {
});
this.minWidth = p[0].width;
},
methods: {
onclick(index, dirIndex) {
this.$emit('click',
{
childrenIndex: index,
dirIndex: dirIndex,
item: this.dataList[dirIndex][index]
});
},
//修改或者替换列表数据
changeItemData(dirIndex, childrenIndex, item) {
this.dataList[dirIndex].splice(childrenIndex, 1, item);
},
//删除一项列表数据
delItemData(dirIndex, childrenIndex) {
this.colHeight.splice(dirIndex, 1, this.colHeight[dirIndex] - this.dataList[dirIndex][childrenIndex].height)
this.dataList[dirIndex].splice(childrenIndex, 1);
this.list2.splice(this.dataList[dirIndex][childrenIndex].index, 1);
this.$nextTick(function () {
this.sucessRank();
})
},
//向列表添加数据
pushData(list) {
console.log('添加图片数据----------',list)
let prIdx_i = this.list2.length;
if (!Array.isArray(list) || typeof list == 'undefined') {
return false;
}
for (let i = 0; i < list.length; i++) {
this.list2.push({
index: i + prIdx_i,
isLoad: false,
image: "",
width: 0,
height: 0,
...list[i]
})
}
},
//获取内部列表数据
getDataList() {
return this.dataList;
},
async loadimg(event, isLoad, index) {
console.log('图片加载事件----------',event)
this.isLoading = true;
let ps = this.list2[index];
ps.isLoad = true;
if (isLoad == false) {
ps.width = this.minWidth;
ps.height = this.minWidth;
} else {
ps.width = this.minWidth;
ps.height = ps.height + event.height;
}
if (this.list2.length == 0 && this.dataList[0].length == 0 && this.dataList[1].length == 0) {
this.isLoading = false;
return;
}
this.list2.splice(index, 1, ps);
if (this.model == 'desc') {
this.sucessRank();
} else if (this.model == 'rank') {
let indexCol = this.colHeight[0] <= this.colHeight[1] ? 0 : 1;
this.dataList[indexCol].push(this.list2[index]);
this.colHeight.splice(indexCol, 1, this.colHeight[indexCol] + this.list2[index].height);
if (this.isAllLoading() === false) return;
this.isLoading = false;
}
},
isAllLoading() {
let isAllload = true;
for (let i = 0; i < this.list2.length; i++) {
if (this.list2[i].isLoad === false) {
isAllload = false;
break;
}
}
if (isAllload === true) {
// 当前列表加载完成发出的事件。
this.$emit('load', this.dataList)
}
return isAllload;
},
sucessRank() {
if (this.isAllLoading() === false) return;
this.isLoading = false;
for (let i = 0; i < this.list2.length; i++) {
// let p = await this.getLeftRightHeight();
let index = this.colHeight[0] <= this.colHeight[1] ? 0 : 1;
this.dataList[index].push(this.list2[i]);
this.colHeight.splice(index, 1, this.colHeight[index] + this.list2[i].height)
}
},
//清空瀑布流数据 。
clear() {
this.list2 = [];
this.dataList = [[], []];
this.isLoading = false;
},
getLeftRightHeight(index) {
let t = this;
return new Promise((resolve, rejecvt) => {
let q = uni.createSelectorQuery().in(t);
q.select(".tm-flowLayout-left").boundingClientRect();
q.select(".tm-flowLayout-right").boundingClientRect();
q.exec((res) => {
resolve([res[0].height, res[1].height])
})
})
}
},
};
</script>
<style lang="scss">
.tm-flowLayout {
.tm-flowLayout-hidden {
width: 100%;
height: 100px;
overflow-y: auto;
left: -300%;
top: 0;
}
.tm-flowLayout-cm {
align-items: flex-start;
}
.card {
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
}
}
</style>