用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>