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.几 ...
随机推荐
- 20140719 找到单链表的倒数第K个节点 判断一个链表是否成为一个环形 反转
1.找到单链表的倒数第K个节点 2.判断一个单链表对否形成环形 3.单链表翻转
- 笔记49 在Spittr应用中整合Hibernate
在前边构建的Spittr应用中整合Hibernate 由于最近所学的hibernate都是使用xml方式进行配置的,所以在与以Java方式配置的Spittr应用结合时就会出现一些小问题,在此进行总结. ...
- 修改docker镜像地址
vim /etc/docker/daemon.json,使用国内加速站点镜像 https://registry.docker-cn.com http://hub-mirror.c.163.com ht ...
- BCZM: Chapter 2
2.1 二进制数中 1 的个数 实现一个函数,输入一个无符号整数,输出该数二进制中的1的个数.例如把9表示成二进制是1001,有2位是1,因此如果输入9,该函数输出2 分析与解法 解法1:利用十进制和 ...
- 解决MySQL登录密码正确却提示错误-1045的方法
MySQL密码正确却无法本地登录-1045 Access denied for user 'root'@'localhost' (using password:YES MySQL密码正确却无法本地登录 ...
- wordpress翻译插件gtranslate
https://www.gdstautoparts.com/
- cocos2D-X 常见49种Action
bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !CCLayer::init( ...
- JavaWeb学习篇之----EL表达式详解
我们之前的几篇文章中都提到了一个EL表达式,那么这个EL表达式到底是什么东东呢?为什么用处那么大,下面我们就来看看EL表达式的相关内容 EL表达式简介: EL 全名为Expression Langua ...
- NOIp2018集训test-9-8(pm) (联考一day2)
把T1题读错了,想了一个多小时发现不可做.然后打了t2,常数不优秀.然后去打t3,lct,结果打挂爆0了. 然后今天就爆炸了. 如果这是noip我今年就可以直接回去学常规了.学常规多好,多开心. 今天 ...
- C语言-实例3个数由小到大排序
VS2012 //C语言实例 3个数由小到大排序 #include <stdio.h> void main() { int a, b, c, t; printf("Please ...