亲宝软件园·资讯

展开

读取HTMLCollection列表的length为0

小丸子yeah~ 人气:0

读取HTMLCollection列表的length为0

在计算better-scroll右侧列表滚动高度的时候,发现列表的length为0

在这里插入图片描述

原因

上网查阅发现问题可能是由于mounted 不会承诺所有的子组件也都一起被挂载。

这个时候dom元素还有没挂载完毕。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:

mounted () {
      this.$nextTick(() => {
      this._initScroll(), this._calculateHeight();
    });  },

但是不清楚为什么使用了这个方法后获取的length依旧为0,

就在_calculateHeight()方法上加了个定时器,等到完全渲染完成时再获取高度(这种问题可能会出现bug,不知道页面什么时候渲染完毕):

_calculateHeight () {
      setTimeout(() => {
        let foodList = this.$refs.right.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (var i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }, 200)
    },

无法读取HTMLCollection列表的length解决

问题

在学习饿了么实践项目时候发现一个问题,

在mounted阶段,获取Element对象,console.log()可以读取出列表,而却无法读出它的length 

如下

      let foodList = this.$refs.menuWrapper.getElementsByClassName('calculate-content')
      let height = 0
      console.log(foodList)
      console.log(foodList.length)
      for (var i = 0; i < foodList.length; i++) {
        height += foodList[i].clientHeight
        this.scrollYList.push(height)
      }

  

原因

以下出自官方文档

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

该钩子在服务器端渲染期间不被调用。

看完以上文档介绍,可以知道在mounted阶段,mounted 不会承诺所有的子组件也都一起被挂载,所以在此阶段,dom结构还没加载完,js就执行了  

解决方案

1.使用官方文档说明(如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 确保渲染完成后再获取数据。

重要的是理解执行顺序,异步调用的话可以使用Promise保证执行顺序

踩到的一个坑:

有文章说可以在updated阶段执行,这时可以取到渲染完毕后的List

updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子

就是说,在使用better-scroll滚动时,会触发updated,使得scrollYList不断被推入数据,然后导致我用这个的时候,整个浏

览器崩溃了,很是尴尬,哈哈哈,所以我感觉updated执行这个解决方案,不大适合解决这类问题

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论