手记

vue 子组件懒加载功能

懒加载功能

子组件扩展参数

参数功能
备注

WatchScroll

是否需要懒加载true必需

winHeight

父元素高度

window.screen.availHeight

必需

ScrollState

滚动监听+new Date()必需


需要父组件做处理

操作代码样例
引入子组件

<hfq-img
                :imgs="scope.row.thumb_img"
                :resourceUrl="resourceUrl"
                :WatchScroll="true"
                :winHeight="winHeight"
                :ScrollState="ScrollState"
              ></hfq-img>

注册子组件需要参数

ScrollState: 0,
      winHeight: 0,

引入事件监听

    window.addEventListener("scroll", this.handleScroll, true);

加入监控函数

   //滚动事件抓取
    handleScroll() {
      this.winHeight = window.screen.availHeight;
      this.ScrollState = +new Date();
    },



1人推荐
随时随地看视频
慕课网APP