Vue.directive('scroll', {
// 当被绑定的元素插入到 DOM 中时……
bind: function(el, binding, vnode) {
el.style.overflow = 'auto'
let distance = 10;
let _this = this;
let busy = el.getAttribute("busy");
let goOn = false;
if (busy) {
vnode.context.$watch(busy, function(value) {
goOn = value;
});
}
el.addEventListener("scroll", function() {
var scrollTop = el.scrollTop;
var viewHeight = el.offsetHeight;
var innerHeight = 0
el.children.forEach((item) => {
innerHeight += item.offsetHeight
})
if (innerHeight - (scrollTop + viewHeight) <= distance) {
if (goOn) {
binding.value.call(_this)
goOn = false
}
}
}, false)
}
})vue 无限滚动加载指令
原创liuhao951866 博主文章分类:vue培训 ©著作权
©著作权归作者所有:来自51CTO博客作者liuhao951866的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:判断是否是IE浏览器
下一篇:js-类数组转为真正数组
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
如何简单实现移动端APP扫码登录PC客户端
如何简单实现移动端APP扫码登录PC客户端
redis 二维码 移动端 -
如何简单实现移动端APP扫码上传图片到PC端
如何简单实现移动端APP扫码上传图片到PC端
redis 上传图片 二维码 -
vue中实现滚动加载
vue中滚动加载数据
vue 滚动加载数据 -
vue pc适配移动端 ios样式问题 vue 适配移动端和pc端
Vue 移动端、PC 端适配可以使用 lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem 和 postcss-px-to-viewport 这几个插件。 &n
vue pc适配移动端 ios样式问题 vue.js 前端 javascript 选择器 -
flink原理+实战学习笔记“一步到位”
参考文献:《Flink原理、实战与性能优化》
flink 学习 笔记 API apache -
protues74HC595
Arduino学习过程中很多童鞋都对74HC595表示晦涩难懂,今天我就来整理一下基本功能,让童鞋们呢能快速上手! 74HC595是一个8位串行输入、并行输出的位移缓存器。 其本质就是 串 行输 入 (一个端口 输入)、 并 行输 出 (8个端口 输出)。
protues74HC595 #Arduino #74Hc595 引脚 数据
















