前言

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

GitHub地址:better-scroll

利用better-scroll也很轻易的实现上述效果。

  1. vue创建项目

项目是基于vue-cli脚手架创建的,所以先必须创建项目(步骤略)。

  1. 引入better-scroll插件

下载:npm install better-scroll --save

项目中引入:import BScroll from 'better-scroll'

引入之后我们可以通过new BScroll()得到一个scroll对象实例,better-scroll的基本语法是:

let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})

better-scroll之所以可以滑动,其原理在于父级元素指定具体宽高,子元素宽高大于父级元素,即可实现滑动,以上两点缺一不可。可以看以下官方图解:

因为我们在vue项目中使用,所以这里还必须强调一点,初始化better-scroll得到scroll对象时必须保证DOM结构渲染完毕,也就是说wrapper里面的内容都渲染完毕之后才能初始化better-scroll,否则可能导致滑动失效。常见的我们可以把初始化BScroll放在this.$nextTick回调函数种执行,因为在此时wrapper 的 DOM 已经渲染了,我们可以正确计算它以及它内层 content 的高度,以确保滚动正常。

这里的 this.$nextTick 是一个异步函数,为了确保 DOM 已经渲染,感兴趣的同学可以了解一下它的内部实现细节,底层用到了MutationObserver或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的(20 ms 是一个经验值,每一个 Tick 约为 17 ms),对用户体验而言都是无感知的。

  1. BScroll初始化时配置pullUpLoadpullDownRefresh属性
mounted () {
...发Ajax得到数据...
... this.$nextTick(() => {
this.myScroll = new BScroll(this.$refs.wrap, {
scrollY: true,
pullDownRefresh: {
threshold: 50,
probeType: 3
},
pullUpLoad: {
threshold: 744
}
})
})
}

pullDownRefresh表示开启下拉刷新,pullUpLoad表示开启上拉加载,默认值全为false,这里具体用法可以去看下better-scroll的官网API。因为页面大多数情况下都是先从后端拿数据过来,然后再渲染DOM结构,所以我在vuemounted钩子里面先发Ajax得到数据后,再利用this.$nextTick()保证DOM渲染完毕后再初始化BScroll。

  1. 为BScroll实例对象绑定pullingUppullingDown事件

pullingUp和pullingDown事件分别对应上拉加载和下拉刷新动作触发事件,在其回调函数里面可以做一些其他的操作,比如常见的从后台获取数据等。切记,一定要在回调的最后调用finishPullUp()finishPullDown()方法来告诉BScroll一次上拉加载和下拉刷新动作结束,否则上拉加载和下拉刷新效果只会触发一次,本人亲自验证!在拿到数据后,如果wrapper里面的结构发生变化一定要调用refresh()方法重新初始化BScroll,否则会导致滑动异常。


this.myScroll.on('pullingDown', () => { ...发送Ajax从后台拿数据...
...
this.$nextTick(() => {
this.myScroll.refresh() // DOM 结构发生变化后,重新初始化BScroll
})
this.myScroll.finishPullDown() // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
}) this.myScroll.on('pullingUp', () => { ...发送Ajax从后台拿数据...
...
this.$nextTick(() => {
this.myScroll.refresh() // DOM 结构发生变化后,重新初始化BScroll
})
this.myScroll.finishPullUp() // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
})
  1. 完成效果图

后语

本文最初摘自我的GitHub仓库:web-study,如果你觉得本文对你前端的学习有帮助,希望给个star,我也会定时更新仓库的内容,欢迎转载,谢谢。仓库地址:web-study

如果你有更好的移动端滑动插件推荐,欢迎留言,分享知识也是一种学习。

全网最easy的better-scroll实现上拉加载和下拉刷新的更多相关文章

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

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

  2. 使用mescroll实现上拉加载与下拉刷新

    现在上拉加载与下拉刷新几乎已经是移动端必备功能之一了,自己实现一个太麻烦,但是好用的插件又非常少.之前看到网上很多人都在用iScroll,于是也尝试用它做了几个DEMO,但或多或少都有一些问题,比如这 ...

  3. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

  4. mescroll.js简单的上拉加载、下拉刷新插件,带完整注释

    声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...

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

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

  6. react antd上拉加载与下拉刷新与虚拟列表使用

    创建项目 create-react-app antdReact 安装:antd-mobile.react-virtualized npm i antd-mobile -S npm i react-vi ...

  7. UITableView与UISearchController搜索及上拉加载,下拉刷新

    #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableVi ...

  8. Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTop ...

  9. 移动端上拉加载,下拉刷新效果Demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. webpack的带表达式require和require.context()方法

    带表达式的 require 语句如果 require参数含有表达式(expressions),会创建一个上下文(context),因为在编译时(compile time)并不清楚具体是哪一个模块被导入 ...

  2. 取response里 Json格式的字段值

    1.

  3. java多线程(四)死锁

    1.1. 什么是死锁 多线程以及多进程改善了系统资源的利用率并提高了系统的处理能力.然而,并发执行也带来了新的问题--死锁. 所谓死锁是指多个线程因竞争资源而造成的一种僵局(互相等待),若无外力作用, ...

  4. Python三角函数公式计算三角形的夹角

    题目内容: 对于三角形,三边长分别为a, b, c,给定a和b之间的夹角C,则有:.编写程序,使得输入三角形的边a, b, c,可求得夹角C(角度值). 输入格式: 三条边a.b.c的长度值,每个值占 ...

  5. Java实现 微信小程序 + 消息推送

    实现效果: 下面要显示五个字段 接下来,参照官方文档,一步步实现: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open- ...

  6. 深入理解Python变量与常量

    深入理解Python变量与常量 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变.基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中.常量是一块只读的内 ...

  7. springboot:自定义缓存注解,实现生存时间需求

    需求背景:在使用springbot cache时,发现@cacheabe不能设置缓存时间,导致生成的缓存始终在redis中. 环境:springboot 2.1.5 + redis 解决办法:利用AO ...

  8. 关闭正在执行的事务 Kill

    .模拟资源锁定 --开始事务BEGIN TRANSACTION--更新数据update Table_1 set FuncName=FuncName--等待1分钟WAITFOR DELAY '01:00 ...

  9. linux vi/vim 编辑器学习总结

    linux vi/vim 编辑器学习总结 很多时候我们开发人员不可避免的会涉及到项目部署,这个时候使用的就不是我们所熟知的 Windows 和 Mac OS 操作系统了,而是类 Unix 系统.项目部 ...

  10. matlab循环中显示figure时窗口跳动

    在Matlab中,当在一个循环内部利用figure显示图片时,有时候会出现窗口跳动,尤其是两个显示器的时候, 具体就是每次循环中显示的figure的位置都出现在屏幕的不同位置,导致看起来灰常不爽 go ...