1***@qq.com
1***@qq.com
  • 发布:2023-10-10 17:25
  • 更新:2023-10-10 19:17
  • 阅读:302

报错 Bad attr `data-event-opts` with message > 1

分类:uni-app

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>
2023-10-10 17:25 负责人:无 分享
已邀请:
套马杆的套子

套马杆的套子 - 没有解决不了的问题,只有解决不完的问题

把 @error="imgError(item)" @load="imgLoad(item)" 中的(item)都去掉

  • 1***@qq.com (作者)

    可以了,感谢大佬

    2023-10-11 10:33

要回复问题请先登录注册