_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)
            });
        }

vue better-scroll 下拉上拉,加载刷新的更多相关文章

  1. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

  2. vue 使用mint-ui实现上拉加载和下拉刷新

    解决了官网中下拉刷新存在的问题 <template> <div class="tmpl"> <nav-bar title="商品列表&quo ...

  3. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  4. vue实现pc端上拉加载功能,不兼容移动端

    所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...

  5. 基于Zepto移动端下拉加载(刷新),上拉加载插件开发

    写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...

  6. 下拉刷新&上拉加载

    效果演示 核心codehtml <ion-view view-title="学生list"> <ion-content > <ion-refreshe ...

  7. JavaScript如何实现上拉加载,下拉刷新?

    转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...

  8. vux-scroller实现移动端上拉加载功能

    本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...

  9. vue.js移动端app实战4:上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

随机推荐

  1. NIO 源码分析(05) Channel 源码分析

    目录 一.Channel 类图 二.begin 和 close 是什么 2.1 AbstractInterruptibleChannel 中的 begin 和 close 2.2 Selector 中 ...

  2. vue-cli中进行微信支付代码详解

    最近做微信支付,颇经历一番波折,这里总结一下,便于以后少走弯路: 在进行微信支付,除了需要公众号之外,你还需要一个微信商户.根据商户规则进行商户申请 这是公众号的基本开发配置,这里在微信授权的时候就已 ...

  3. 看了Google编码规范,我突然有个感觉

    那么个编码规范,充分体现了西方人的自我感觉良好,以及以自己为中心的程度, 以及西方人对待事物的双重标准.

  4. EE5111_A0206839W

      EE5111 Selected Topics in Industrial Control & Instrumentation Assessment: Implement a simple ...

  5. Ubuntu下安装nfs,Windows下访问

    Linux 下: 1. 在终端输入  sudo apt-get install portmap nfs-common nfs-kernel-server 2.建立客户机访问目录  sudo mkdir ...

  6. MonkeyTalk使用方法

    1.简单介绍 MonkeyTalk软件测试工具由两部分构成:MonkeyTalk IDE 和 MonkeyTalk Agents MonkeyTalk IDE是Eclipse平台的工具,工能是:对iO ...

  7. 杭电多校第三场-H-Game

    题目描述 Again Alice and Bob is playing a game with stones. There are N piles of stones labelled from 1 ...

  8. 笔记40 Spring Web Flow——订单流程(构建订单)

    二.订单子流程 在识别完顾客之后,主流程的下一件事情就是确定他们想要什么类型 的披萨.订单子流程就是用于提示用户创建披萨并将其放入订单中 的,如下图所示. showOrder状态位于订单子流程的中心位 ...

  9. 在当前对象中可以使用this关键字指代当前对象

    在当前对象中可以使用this关键字指代当前对象

  10. 【PKUWC2018】猎人杀

    题目描述 题目分析 设\(W=\sum\limits_{i=1}^nw_i\),\(A=\sum\limits_{i=1}^nw_i[i\ is\ alive]\),\(P_i\)为下一个打中\(i\ ...