betterscroll上拉加载
- 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上拉加载的更多相关文章
- vue+better-scroll 下拉刷新,上拉加载更多
better-scroll 来做下拉刷新和 上拉加载 特别方便. 安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
- 全网最easy的better-scroll实现上拉加载和下拉刷新
前言 移动端页面常见的一种效果:下拉刷新(pulldownrefresh)和上拉加载(pullupload),目的都是为了增强用户的体验效果,因此各种移动端滑动插件也是层出不穷,今天小编也在这里给大家 ...
- 利用伪类选择器与better-scroll的on事件所完成的上拉加载
之前给大家分享过一篇上拉加载 利用了better-scroll的pullUpDown 和DOM元素的删除添加 感觉那样不太好 今天给大家分享一个不同的上拉加载思想 代码如下 class List { ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- JavaScript如何实现上拉加载,下拉刷新?
转载地址: 面试官:JavaScript如何实现上拉加载,下拉刷新? 一.前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀 ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- android使用PullToRefresh实现上拉加载和下拉刷新效果
其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...
- iscroll5实现一个下拉刷新上拉加载的效果
直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...
随机推荐
- Golang--Directional Channel(定向通道)
Directional Channel 通道可以是定向的(directional).在默认情况下,通道将以双向的(bidirectional)形式运作,用户既可以把值放人通道,也可以从通道取出值;但是 ...
- POSTGIS
https://blog.csdn.net/qq_35732147/article/details/85256640 官方文档:http://www.postgis.net/docs/ST_Buffe ...
- Spring Boot,Spring Cloud,Eureka,Actuator,Spring Boot Admin,Stream,Hystrix
Spring Boot,Spring Cloud,Eureka,Actuator,Spring Boot Admin,Stream,Hystrix 一.Spring Cloud 之 Eureka. 1 ...
- Tomcat Servlet工作原理
前言 Tomcat的启动过程 Web应用初始化 创建Servlet实例 初始化Servlet 执行service方法 前言 Servlet实际上就是一个java类,只不过可以和浏览器进行一些数据的交换 ...
- Java 容器系列总结
为什么要使用集合 当我们需要保存一组类型相同的数据的时候,我们应该是用一个容器来保存,这个容器就是数组,但是,使用数组存储对象具有一定的弊端, 因为我们在实际开发中,存储的数据的类型是多种多样的,于是 ...
- ACDream手速赛2
地址:http://acdream.info/onecontest/1014 都是来自Codeforce上简单题. A. Boy or Girl 简单字符串处理 B. Walking in ...
- Codeforces Round #656 (Div. 3) A. Three Pairwise Maximums
题目链接:https://codeforces.com/contest/1385/problem/A 题意 给出三个正整数 $x,y,z$,找出三个正整数 $a,b,c$ 使得 $x = max(a, ...
- hdu5790 Prefix(Trie树+主席树)
Problem Description Alice gets N strings. Now she has Q questions to ask you. For each question, she ...
- Educational Codeforces Round 9 C. The Smallest String Concatenation(字符串排序)
You're given a list of n strings a1, a2, ..., an. You'd like to concatenate them together in some or ...
- hdu 6795 Little W and Contest 并查集+排列组合
题意: t组输入,有n个人,刚开始谁也不认识谁.每一个人有一个权值w[i](1<=w[i]<=2),你要挑选3个互相不认识的人组成一个队,且要保证3个人权值之和大于等于5(也就意味着最少要 ...