vue better-scroll 下拉上拉,加载刷新

_initScroll(){

             this .$nextTick(() => {
                 if  (! this .scroll) {
                     this .scroll =  new  BScroll( this .$refs.bscroll, {
                         click:  true ,
                         scrollY:  true ,
                         probeType: 3
                     });
                 } else {
                     this .scroll.refresh();
                 }
                 this .scroll.on( 'scroll' , (pos) => {
                     console.log(pos.y, this .dropDown)
                     //如果下拉超过50px 就显示下拉刷新的文字
                     if (pos.y>50){
                            // 显示刷新的element  this.xxx = true;
                     } else {
                      // 隐藏刷新的element  this.xxx = false;
                     }
                 })
                 //touchEnd(手指离开以后触发) 通过这个方法来监听下拉刷新
                 this .scroll.on( 'touchEnd' , (pos) => {
                     // 下拉动作
                     if (pos.y > 50){
                         console.log( "下拉刷新成功" )
                        // 隐藏刷新的element   this.xxx = false;
                     }
                     //上拉加载 总高度>下拉的高度+10 触发加载更多
                     if ( this .scroll.maxScrollY>pos.y+10){
                         console.log( "加载更多" )
                         //使用refresh 方法 来更新scroll  解决无法滚动的问题
                         this .scroll.refresh()
                     }
                     console.log( this .scroll.maxScrollY+ "总距离----下拉的距离" +pos.y)
                 })
                 console.log( this .scroll.maxScrollY)
             });
         }

猜你喜欢

转载自www.cnblogs.com/xzc666/p/9455861.html