zoukankan      html  css  js  c++  java
  • 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)
                });
            }
  • 相关阅读:
    静态切割窗体+关联对话框
    POJ 2236 Wireless Network(并查集)
    怎样学习(3):迭代学习,精益求精
    【菜鸟也疯狂UML系列】——概述
    OpenGL 资源汇编
    vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
    内置组件 && vue中强大的缓存机制之keep-alive
    vue生命周期及使用 && 单文件组件下的生命周期
    vue中遇到的坑 --- 变化检测问题(数组相关)
    如何去除vue项目中的 # --- History模式
  • 原文地址:https://www.cnblogs.com/xzc666/p/9455861.html
Copyright © 2011-2022 走看看