uniapp vue2版本
使用 <image :src="item.imgUrl" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
运行到微信开发者工具中报 Bad attr data-event-opts
with message > 1 错误
完整代码:
<template>
<view class="container">
<view
:id="`cont_${index + 1}`"
class="cont-box"
:style="{ width: widthCalc, 'margin-left': index === 0 ? 0 : marginCalc }"
v-for="(numVal, index) in flowData.column"
:key="index"
>
<view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
<image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load @load="imgLoad(item)" @error="imgError(item)" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
flowData: {
list: [],
column: 2,
columnSpace: 2
}
};
},
created() {
for (let i = 1; i <= this.flowData.column; i++) {
this.$set(this.flowData, `column_${i}`, []);
}
},
onLoad() {
this.flowData.list = [
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044667_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044562_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045057_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044716_thumb.jpg"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044779_thumb.jpg"
}
];
this.initValue(0);
},
computed: {
widthCalc() {
return `${100 / this.flowData.column - this.flowData.columnSpace}%`;
},
marginCalc() {
const columnWidth = 100 / this.flowData.column - this.flowData.columnSpace;
return `${(100 - columnWidth.toFixed(5) * this.flowData.column) / (this.flowData.column - 1)}%`;
}
},
methods: {
getMinObj(a, s) {
let m = a[0][s];
let mo = a[0];
for (let i = a.length - 1; i >= 0; i--) {
if (a[i][s] < m) m = a[i][s];
}
mo = a.filter(i => i[s] === m);
return mo[0];
},
getMinColumnHeight() {
return new Promise(resolve => {
const heightArr = [];
for (let i = 1; i <= this.flowData.column; i++) {
uni
.createSelectorQuery()
.in(this)
.select(`#cont_${i}`)
.boundingClientRect(res => {
heightArr.push({ column: i, height: res.height });
})
.exec(() => {
if (this.flowData.column <= heightArr.length) {
resolve(this.getMinObj(heightArr, "height"));
}
});
}
});
},
async initValue(i) {
if (i >= this.flowData.list.length) return false;
const minHeightRes = await this.getMinColumnHeight();
this.flowData[`column_${minHeightRes.column}`].push({
...this.flowData.list[i],
index: i
});
},
imgLoad(item) {
const i = item.index;
this.initValue(i + 1);
},
imgError(item) {
const i = item.index;
this.initValue(i + 1);
}
}
};
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx;
.cont-box {
$borderRadius: 12rpx;
float: left;
.item-box {
width: 100%;
padding-bottom: 20rpx;
margin-bottom: 30rpx;
border-radius: $borderRadius;
box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
.img-tip {
width: 100%;
border-radius: $borderRadius $borderRadius 0 0;
}
}
}
}
</style>
1***@qq.com (作者)
可以了,感谢大佬
2023-10-11 10:33