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) }); }vue better-scroll 下拉上拉,加载刷新的更多相关文章
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- vue 使用mint-ui实现上拉加载和下拉刷新
解决了官网中下拉刷新存在的问题 <template> <div class="tmpl"> <nav-bar title="商品列表&quo ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
- vue实现pc端上拉加载功能,不兼容移动端
所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...
- 基于Zepto移动端下拉加载(刷新),上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- 下拉刷新&上拉加载
效果演示 核心codehtml <ion-view view-title="学生list"> <ion-content > <ion-refreshe ...
- JavaScript如何实现上拉加载,下拉刷新?
转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...
- vux-scroller实现移动端上拉加载功能
本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
随机推荐
- NIO 源码分析(05) Channel 源码分析
目录 一.Channel 类图 二.begin 和 close 是什么 2.1 AbstractInterruptibleChannel 中的 begin 和 close 2.2 Selector 中 ...
- vue-cli中进行微信支付代码详解
最近做微信支付,颇经历一番波折,这里总结一下,便于以后少走弯路: 在进行微信支付,除了需要公众号之外,你还需要一个微信商户.根据商户规则进行商户申请 这是公众号的基本开发配置,这里在微信授权的时候就已 ...
- 看了Google编码规范,我突然有个感觉
那么个编码规范,充分体现了西方人的自我感觉良好,以及以自己为中心的程度, 以及西方人对待事物的双重标准.
- EE5111_A0206839W
EE5111 Selected Topics in Industrial Control & Instrumentation Assessment: Implement a simple ...
- Ubuntu下安装nfs,Windows下访问
Linux 下: 1. 在终端输入 sudo apt-get install portmap nfs-common nfs-kernel-server 2.建立客户机访问目录 sudo mkdir ...
- MonkeyTalk使用方法
1.简单介绍 MonkeyTalk软件测试工具由两部分构成:MonkeyTalk IDE 和 MonkeyTalk Agents MonkeyTalk IDE是Eclipse平台的工具,工能是:对iO ...
- 杭电多校第三场-H-Game
题目描述 Again Alice and Bob is playing a game with stones. There are N piles of stones labelled from 1 ...
- 笔记40 Spring Web Flow——订单流程(构建订单)
二.订单子流程 在识别完顾客之后,主流程的下一件事情就是确定他们想要什么类型 的披萨.订单子流程就是用于提示用户创建披萨并将其放入订单中 的,如下图所示. showOrder状态位于订单子流程的中心位 ...
- 在当前对象中可以使用this关键字指代当前对象
在当前对象中可以使用this关键字指代当前对象
- 【PKUWC2018】猎人杀
题目描述 题目分析 设\(W=\sum\limits_{i=1}^nw_i\),\(A=\sum\limits_{i=1}^nw_i[i\ is\ alive]\),\(P_i\)为下一个打中\(i\ ...