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.几 ...
随机推荐
- 《深入理解Java虚拟机》-(实战)boolean类型在虚拟机中是如何处理的
这里先引出Java的8大基本类型.直接上图吧. 可以看到,除了boolean和char类型之外,越往下的类型的值域是包含以上的值域的.因此,从上面的基本类型转换成下面的基本类型,无需强制转换.关于它们 ...
- spring boot Swagger2(version=2.7.0) 注解@ApiImplicitParam的属性dataType值为”自定义泛型“应用
注解: @ApiImplicitParams @ApiImplicitParam name="需注解的API输入参数", value="接收参数的意义描述" ...
- 30个优秀的CSS技术和实例 By 彬Go 2008-12-04
在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...
- Java泛型中extends和super的区别?
<? extends T>和<? super T>是Java泛型中的"通配符(Wildcards)"和"边界(Bounds)"的概念. ...
- Dubbo管理端工具
要得到dubbo的管理端工具其实很简单,只需要下面几步: 1.下载源码:我下载的是dubbo-dubbo-2.5.7.zip . 2.使用maven命令编译源码,得到war包: 将下载的dubbo-d ...
- Algo: Binary search
二分查找的基本写法: #include <vector> #include <iostream> int binarySearch(std::vector<int> ...
- Java中的反射该如何使用?
1. 什么是反射 反射是一种功能强大且复杂的机制.Java反射说的是在运行状态中,对于任何一个类,我们都能够知道这个类有哪些方法和属性.对于任何一个对象,我们都能够对它的方法和属性进行调用.我们把这种 ...
- Python 刷题知识点
if : elif : else : print('{0} \n{1} \n{2}' .format((a + b), (a - b), (a * b))) print(*[num**2 for nu ...
- 解析Mybatis入门第一天
MyBatis是一个基于Java的持久层框架,内部对JDBC做了封装,使开发者只需要关注SQL语句,而不用关注JDBC的代码,使开发变得更加的简单. MyBatis通过XML或者注解的方式将要执行的各 ...
- 删除重复数据并保留id最小的一条记录
delete from test where id not in ( select a.id from (select min(id) as id from test group by form_i ...