mounted(){
var that=this;
setTimeout(()=>{
let scroll = new BScroll(document.getElementById('wrapper'),{
probeType: 1
}) scroll.on('scroll', (pos) => {
// console.log(pos.x + '~' + posx.y)
});
// 滑动结束 scroll.on('touchend', function (position) {
if(position.y < (this.maxScrollY - 30)) {
alert('加载中')
setTimeout(function () {
// 恢复文本值
alert('加载更多')
// 向列表添加数据
//reloadData();
that.loadRank(that.currentPage + 1);
// 加载更多后,重新计算滚动区域高度
scroll.refresh();
}, 1000);
}
});
},200)
},

  

betterscroll上拉加载的更多相关文章

  1. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  2. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

  3. 全网最easy的better-scroll实现上拉加载和下拉刷新

    前言 移动端页面常见的一种效果:下拉刷新(pulldownrefresh)和上拉加载(pullupload),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...

  4. 利用伪类选择器与better-scroll的on事件所完成的上拉加载

    之前给大家分享过一篇上拉加载 利用了better-scroll的pullUpDown 和DOM元素的删除添加  感觉那样不太好 今天给大家分享一个不同的上拉加载思想 代码如下 class List { ...

  5. vue.js移动端app实战4:上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  6. JavaScript如何实现上拉加载,下拉刷新?

    转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...

  7. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  8. android使用PullToRefresh实现上拉加载和下拉刷新效果

    其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...

  9. iscroll5实现一个下拉刷新上拉加载的效果

    直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...

随机推荐

  1. luogu p3369

    题目描述您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数删除x数(若有多个相同的数,因只删除一个)查询x数的排名(排名定义为比当前数小的数的个数+1.若有多个相同 ...

  2. LOJ10081

    USACO 201 Jan. Gold Farmer John 正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到 T 个城镇 ,编号为 1 到 T.这些城镇之间通过 R 条道路(编号为 ...

  3. Linux CGroup入门

    Linux cgroup Linux CGroup全称Linux Control Group, 是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等).L ...

  4. 一文读懂云上DevOps能力体系

    简介: 阿里云ECS自动化运维套件架构师,深度拆解云上运维能力体系建设:自动化运维等级金字塔.自动化运维的进阶模式.DevOps的基础核心.云上标准化部署三大能力-- 序言 云计算行业已经有十多年的发 ...

  5. Scala类型参数(泛型)与隐式转换

    package com.yz9 import org.junit.Test import scala.collection.mutable.ListBuffer class test { @Test ...

  6. Codeforces Global Round 9 E. Inversion SwapSort

    题目链接:https://codeforces.com/contest/1375/problem/E 题意 给出一个大小为 $n$ 的数组 $a$,对数组中的所有逆序对进行排序,要求按照排序后的顺序交 ...

  7. Pokémon Army (easy version) CodeForces - 1420C1 dp

    题意: 给你一个长度为n个序列v,你需要从中找一个子序列.这个子序列的值等于:子序列中奇数下标的值-偶数下标的值 你需要使得这个值尽可能大,让你输出这个最大值 题解: dp[i][0]表示:在原序列从 ...

  8. c语言实现n!算法

    最近一面学习数据结构,一面在做些c语言的题目.这个题目前些天碰到,和同学讨论了下.于是就用c语言实现n!(n=10000) 1 #include<stdio.h> 2 #define MA ...

  9. AtCoder Beginner Contest 184 F - Programming Contest (双向搜索)

    题意:有一个长度为\(n\)的数组,你可以从中选一些数出来使得它们的和不大于\(t\),问能选出来的最大的和是多少. 题解:\(n\)的数据范围是\(40\),直接二进制枚举贴TLE,之前写过这样的一 ...

  10. java——字符串常量池、字符串函数以及static关键字的使用、数组的一些操作函数、math函数

    字符串常量池: 字符串比较函数:  字符串常用方法:  字符串截取函数: 字符串截取函数:  static关键字使用: 要调用类中的static类型的变量的时候,可以用"类名.变量名&quo ...