Vue滚动加载自定义指令

用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.scrollHeight 内容高度 (兼容性写法)

let bodyHeight = document.body.scrollHeight ||  document.documentElement.scrollHeight;

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

    directives: {

      /**

       * 滚动加载的自定义指令

       */

      scroll: {

        bind: function (el, binding, vnode) {

          window.addEventListener('scroll', vnode.context.scrollLoad)

        },
　　　　//路由转跳到其他页面时，会调用unbind，解绑滚动加载事件。

        unbind: function (el,binding, vnode) {

          window.removeEventListener('scroll', vnode.context.scrollLoad)

        }

      }

    },

    methods: {

      scrollLoad() {

        //滚动条高度（页面被卷去高度）

        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

        //文档高度

        let bodyHeight = document.body.scrollHeight ||  document.documentElement.scrollHeight;

        if (scrollTop + window.innerHeight >= bodyHeight - 50) {

          //判断请求发送标志位，避免重复请求(这个需要自己在data里声明，直接贴代码会报错。默认为false，发送请求前改为true， 请求完成回调函数里改回false)

          if (this.loading) return;

          //发送请求

          this.getnewsData();

        },

        getnewsData() {/*发送请求的函数*/}

      },

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

必须要在unbind钩子中解绑滚动加载事件，否则在其他页面也会被触发。

使用时，因为基于文档高度和滚动条高度，绑在哪里无所谓，这里绑定到容器上就可以了。

<template>

  <section v-scroll>

    <ul>

      <template v-for="data in datas">

        <li>

             ..........

        </li>

      </template>

    </ul>

  </section>

</template>

以上内容，转载请注明出处 https://www.cnblogs.com/lijinwen/p/8444400.html

巴特西

Vue滚动加载自定义指令

最新文章

热门文章