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 ...
随机推荐
- loj10005数列极差
题目描述 佳佳的老师在黑板上写了一个由 n个正整数组成的数列,要求佳佳进行如下操作:每次擦去其中的两个数 a 和 b,然后在数列中加入一个数 a*b+1,如此下去直至黑板上剩下一个数为止,在所有按这 ...
- 一次sql server实战
前言:朋友在做授权项目的时候,遇到一个sql server数据库的注入点,没办法解决,让我帮忙看看,因为是授权项目,所以就可以帮助测试下. 内容如下: 单引号,很明显的错误,因为是时间格式:2020- ...
- Hive基于MapReduce运行过程
原文链接https://www.cnblogs.com/felixzh/p/8604188.html Map阶段包括: 第一读数据:从HDFS读取数据 1.问题:读取数据产生多少个Mapper? Ma ...
- debian 屌丝日记
好几年前,刚开始学习linux时,写的笔记,现在看来还挺有意思的,发出来 纪念下 1.安装debian系统,只安装最基本系统 不要桌面,不要print server,具体不会看网上图文并茂的 1) ...
- ehCache 配置
package com.jy.modules.cms; import java.io.Serializable; import net.sf.ehcache.Cache; import net.sf. ...
- TCP/IP__TCP/IP协议
1.定位:指因特网整个TCP/IP协议族,由四个层次组成:网络接入层.网络层.主机到主机层.应用层.也叫DoD模型.每一层都呼叫它的下一层所提供的网络来完成自己的需求. 2.与OSI模型的对应: 3. ...
- python flask_sqlalchemy 多态 polymorphic 实现单表继承
sqlalchemy 多态 polymorphic 实现单表继承 sqlaclchemy中的单表继续就是以一个模型类为基类,其他模型类继承基类,所有模型类的的数据都存一张表里面(也可以是多张,只不过基 ...
- DedeCMS程序使用拼音首字母做栏目名称的方法
Dedecms织梦程序默认使用拼音为保存目录的时候使用的是中文全拼,当遇到栏目名称比较长的时候目录名称看起来有点冗长,这时候大多数站长喜欢使用拼音首字母作为栏目的保存目录,那么就需要修改 dede/c ...
- docker(9)Dockerfile制作镜像
前言 如果我们已经安装了一个python3的环境,如果另一台机器也需要安装同样的环境又要敲一遍,很麻烦,这里可以配置Dockerfile文件,让其自动安装,类似shell脚本 Dockerfile编写 ...
- SDNUOJ1016矩形合并
传送门 题意: 给出n个矩形,把重合的矩形归成一个图形,问合并以后剩下几个图形 思路: 我开始想用dfs,但是发现不太行. 后来知道才是并查集 Orz 用一个结构体数组存矩形的左下角和右上角的坐标,再 ...