- 监听页面生命周期 onReachBottom 链接: https://uniapp.dcloud.io/collocation/frame/lifecycle
- page-meta 标签 有一个事件 @scrolldone 可以直接监听页面滚动结束
-
引入了一个组件,组件中要监听页面滚动结束,就不能用 页面生命周期 了
在 <scroll-view></scroll-view>监听滚动事件( 注意:必须给scroll-view标签设定高度,不然事件没有效果),@scroll="addClass",
data中定义了2个变量, scroll_end(为真滚动结束),scrollTop (页面滚动的高度)
效果展示: 绑定的是 animate.css 的class class="{'animate__backOutRight': !scroll_end, 'animate__backInRight' : scroll_end }"addClass(event){ this.scroll_end = false; const that = this; this.scrollTop = event.detail.scrollTop; clearTimeout(timer); var timer = setTimeout(function(){ if( event.detail.scrollTop === that.scrollTop ){ that.scroll_end = true; console.log(that.scroll_end,"是否结束",event.detail.scrollTop, "data", that.scrollTop ) clearTimeout(timer); timer = null; // 处理回收 } }, 500) },

小少年报
- 发布:2020-07-22 11:35
- 更新:2020-07-22 11:35
- 阅读:6307
监听uniapp页面滚动结束的方法
分类:uni-app
0 个评论
要回复文章请先登录或注册