码迷,mamicode.com
首页 > 其他好文 > 详细

手撸一个Vue滚动加载自定义指令

时间:2018-02-12 15:15:27      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:lang   避免   性问题   框架   this   load   nbsp   通过   min   

用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发。无奈我只能自己写了。

决定用vue 的自定义指令 写滚动加载。

核心的api

  • document.body.scrollTop 滚动条滚动的距离 (这个有兼容性问题,兼容性写法) 
    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  • window.innerHeight 浏览器窗口高度
  • document.body.clientHeight 内容高度

思路给window绑定滚动事件,用  if(滚动条高度 + 浏览器窗口高度 >= 内容高度 - 阈值)  作为判断条件。我们把自定义指令命名为 scroll

      directives: {
        //滚动加载的自定义指令
        scroll: {
          bind: function(el, binding, vnode) {
              window.addEventListener(scroll,()=> {
                let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if(scrollTop + window.innerHeight >= el.clientHeight - 50) {
                  //判断请求发送标志位,避免重复请求
                  if(vnode.context.loading) return;
                  
                  //发送请求
                  vnode.context.getnewsData();
                }
              })
          }
        }
      },

有一个重点,因为发送请求的方法定义在了组件的methods中,在自定义指令里,不能通过this拿到Vue实例,而是通过指令钩子函数的第三个参数vnode的context属性拿Vue的实例。 

 

使用 时,直接给容器绑定v-scroll 指令即可

<template>
  <section v-scroll>
    <ul>
      <template v-for="data in data">
        <li>
             ..........
        </li>
      </template>
    </ul>
</section>
</template>

 

手撸一个Vue滚动加载自定义指令

标签:lang   避免   性问题   框架   this   load   nbsp   通过   min   

原文地址:https://www.cnblogs.com/lijinwen/p/8444400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!