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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
vue select 获取value和lable操作
Aug 28 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP的FTP学习(二)
2006/10/09 PHP
基于mysql的bbs设计(一)
2006/10/09 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python视频按帧截取图片工具
2019/07/23 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
产假请假条
2014/04/10 职场文书
党的生日演讲稿
2014/09/10 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书