继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue 子组件懒加载功能

熠熠生阳
关注TA
已关注
手记 67
粉丝 76
获赞 1245

懒加载功能

子组件扩展参数

参数功能
备注

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();
    },



打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP