vue使用better-scroll实现下拉刷新、上拉加载


Posted in Javascript onNovember 23, 2018

本文目的是为了实现列表的下拉刷新、上拉加载,所以选择了better-scroll这个库。

用好这个库,需要理解下面说明

  • 必须包含两个大的div,外层和内层div
  • 外层div设置可视的大小(宽或者高)-有限制宽或高
  • 内层div,包裹整个可以滚动的部分
  • 内层div高度一定大于外层div的宽或高,才能滚动

1、先开始写一个简单demo,最基本的代码架构

template

<div ref="wrapper" class="wrapper">
 <ul class="content">
 <li>...</li>
 <li>...</li>
 </ul>
</div>

css

/*对外层div进行了高度上的限制*/
.wrapper {
 display: fixed;
 left: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height:300px;
 overflow:hidden;
}
.content {
 width:100%;
 height:800px;
 background:blue;
}

script

import BScroll from 'better-scroll'
this.scroll = new BScroll(new BScroll(this.$refs.wrapper))

2、进行改造升级,加上上拉刷新、下拉加载的代码。

mounted () {
 this.scroll = new BScroll(this.$refs.wrapper, {
 // 上拉加载
 pullUpLoad: {
 // 当上拉距离超过30px时触发 pullingUp 事件
 threshold: -30
 },
 // 下拉刷新
 pullDownRefresh: {
 // 下拉距离超过30px触发pullingDown事件
 threshold: 30,
 // 回弹停留在距离顶部20px的位置
 stop: 20
 }
 })
 this.scroll.on('pullingUp', () => {
 console.log('处理上拉加载操作')
 setTimeout(() => {
 // 事情做完,需要调用此方法告诉 better-scroll 数据已加载,否则上拉事件只会执行一次
 this.scroll.finishPullUp()
 }, 2000)
 })
 this.scroll.on('pullingDown', () => {
 console.log('处理下拉刷新操作')
 setTimeout(() => {
 console.log('asfsaf')
 // 事情做完,需要调用此方法告诉 better-scroll 数据已加载,否则下拉事件只会执行一次
 this.scroll.finishPullDown()
 }, 2000)
 })
 }

原理已经讲清楚了,上面的代码是一个功能示例,码友结合自己项目扩展就行啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Preload基础使用方法详解
Feb 03 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 #Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 #Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 #Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 #Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 #Javascript
vue全局使用axios的方法实例详解
Nov 22 #Javascript
vue中的ref和$refs的使用
Nov 22 #Javascript
You might like
PHP 事件机制(2)
2011/03/23 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python浪漫表白源码
2019/04/05 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python logging通过json文件配置的步骤
2020/04/27 Python
pip install命令安装扩展库整理
2021/03/02 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
最新教师自我评价分享
2013/11/12 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
LeetCode189轮转数组python示例
2022/08/05 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript