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.几 ...
随机推荐
- JUC源码分析-集合篇:并发类容器介绍
JUC源码分析-集合篇:并发类容器介绍 同步类容器是 线程安全 的,如 Vector.HashTable 等容器的同步功能都是由 Collections.synchronizedMap 等工厂方法去创 ...
- docker 详细安装及问题排查
一.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看 ...
- 48-Ubuntu-系统信息-3-查看进程命令
序号 命令 作用 01 ps aux process status查看进程的详细状况 02 top 动态显示运行中的进程并且排序 03 kill [-9] 进程代号 终止指定代号的进程,-9表示强行 ...
- HTTP信息头处理器
就是HTTP请求头-Header
- Java泛型中extends和super的区别?
<? extends T>和<? super T>是Java泛型中的"通配符(Wildcards)"和"边界(Bounds)"的概念. ...
- nginx 简单使用
一,下载 http://nginx.org/en/download.html 这个是我下载的windows版本 二,解压后目录 三,修改配置文件 (由于80端口很可能被 SQL Server Repo ...
- java中Class.getMethods()和Class.getDeclaredMethods()的区别
在java中,可以根据Class类的对象,知道某个类(接口)的一些属性(成员 ,方法,注释,注解)等.由于最近的工作中用到了这些,其中需要在代码中格局反射知道某些类的方法,查看文档的时候,看到了get ...
- exports和module.exports的区别——学习笔记
一开始,exports和module.exports都指向空对象(同一内存块),exports是引用 module.exports的值.module.exports 被改变的时候,exports不会被 ...
- Java HashSet和ArrayList的查找Contains()时间复杂度
今天在刷leetCode时,碰到了一个题是这样的. 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 看到 ...
- Bootstrap快速入门并且建立常用模板
对于移动端,能够快速搭建网站,操作相对简单 ,更容易掌握,这篇文章就介绍一下BootStrap 一 什么是Bottstrap 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受 ...