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.几 ...
随机推荐
- Spring Boot多数据库配置
#datasourcespring.datasource.url=jdbc:mysql://120.26.246.185:3306/gaea?&useSSL=falsespring.datas ...
- Tomcat集群session复制与Oracle的坑。。
问题描述 公司某个系统使用了tomcat自带的集群session复制功能,然后后报了一个oracle驱动包里面的连接不能被序列化的异常. 01-Nov-2017 16:45:26.653 SEVERE ...
- MySQL在Win10与Ubuntu下的安装与配置
本文首发于cartoon的博客 转载请注明出处:https://cartoonyu.github.io/cartoon-blog 近段时间把自己电脑(win).虚拟机(Ubun ...
- Struts2入门示例(Myeclipse)
1.新建Web项目在lib导入struts-2.3.37核心基础jar包 2.在WebRoot新建2个JSP demo1.jsp <%@ page language="java&quo ...
- 关于HTML 5 canvas 的基础教程
HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素.HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canv ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- svn 一、 安装及汉化
svn 是日常开发过程中常用的版本控制工具 第一步 安装 进入官网 https://tortoisesvn.net/ 点击downloads 进入之后选中 需要的版本,及位数 这里推荐安装最新版的 因 ...
- [JZOJ6353] 【NOIP2019模拟】给
题目 题目大意 对于所有的整数\(k \in [1,n]\),求叶子结点有\(k\)个的二叉树个数,满足每个非叶子结点都有两个儿子,并且对于每个叶子结点,从根节点到它经过的向左的边数少于等于\(m\) ...
- nginx+keepalive 实现高可用负载均衡方案
转:http://ju.outofmemory.cn/entry/52165 主nginx负载均衡器:172.26.11.99 (通过keepalived配置了VIP:172.26.11.101供外 ...
- unity 移动
上下左右平移 void Start() { QualitySettings.vSyncCount = ; Application.targetFrameRate = ;//控制帧数 } // Upda ...