利用vue进行页面滚动监听，上拉刷新

2019独角兽企业重金招聘Python工程师标准>>>

1、利用vue进行页面滚动监听，上拉刷新

methods: {handleScroll(){let page = document.getElementById('content');// console.log(this.tempScrollTop,page.scrollTop,page.clientHeight,page.scrollTop+page.clientHeight,page.scrollHeight);if(page.scrollTop+page.clientHeight >= page.scrollHeight-25){if(page.scrollTop+page.clientHeight >= page.scrollHeight-5){this.more = '加载中...';this.pageNo ++;fnInitData();} else if(this.tempScrollTop > page.scrollTop){this.more = '';} else {this.more = '上拉加载更多...';}this.tempScrollTop = page.scrollTop;} else {this.more = '';console.log(this.pageNo,this.more);}},},mounted(){document.getElementById('content').addEventListener('scroll',this.handleScroll);},beforeDestroy(){document.getElementById('content').removeEventListener('scroll', this.handleScroll);}

转载于:https://my.oschina.net/u/2365397/blog/3047852

利用vue进行页面滚动监听，上拉刷新相关推荐

vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
目录案例1 源码如下效果如下案例2 源码如下效果如下最后案例1 源码如下 navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换 <template> ...
vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
html页面滚动条监听事件,滚动条的scroll事件
在vb中,滚动条的scroll 事件和change 事件的区别scroll和change的区别为:指代不同.用法不同.侧重点不同一.指代不同 scroll:滚屏,滚动. change:变更,变革. ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...
vue watch 修改滚动条_vue实现滚动监听，点击瞄点平滑滚动，控制内嵌滚动条滚动...
滚动效果当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...
vue 滑动置顶功能_VUE 实现滚动监听导航栏置顶的方法_蜡烛_前端开发者
非重点的代码,比如样式啥的,我就不放上来了,一笔带过简略的写一下 1. data () data () { paddingBottom: '1.5rem', // 给最外层div一个padding- ...
4.18、Bootstrap V4自学之路-----内容---滚动监听
为什么80%的码农都做不了架构师?>>> 总体来说,用起来不是特别满意,先放一放吧. 导航条示例滚动监听插件会根据滚动的位置,自动更新导航条的目标.滚动在导航条下面的区域,查 ...
Bootstrap3 滚动监听插件的调用方式
滚动监听插件的调用方式无论何种实现方式,滚动监听都需要被监听的组件是position: relative;即相对定位方式.大多数时候是监听<body>元素. 1.data属性调用只需给 ...

利用vue进行页面滚动监听，上拉刷新

利用vue进行页面滚动监听，上拉刷新相关推荐

最新文章

热门文章