小少年报
小少年报
  • 发布:2020-07-22 11:35
  • 更新:2020-07-22 11:35
  • 阅读:6307

监听uniapp页面滚动结束的方法

分类:uni-app
  1. 监听页面生命周期 onReachBottom 链接: https://uniapp.dcloud.io/collocation/frame/lifecycle
  2. page-meta 标签 有一个事件 @scrolldone 可以直接监听页面滚动结束
  3. 引入了一个组件,组件中要监听页面滚动结束,就不能用 页面生命周期 了
    在 <scroll-view></scroll-view>监听滚动事件( 注意:必须给scroll-view标签设定高度,不然事件没有效果),@scroll="addClass",
    data中定义了2个变量, scroll_end(为真滚动结束),scrollTop (页面滚动的高度)

                        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)  
            },
    效果展示: 绑定的是 animate.css 的class class="{'animate__backOutRight': !scroll_end, 'animate__backInRight' : scroll_end }"
0 关注 分享

要回复文章请先登录注册