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

本文目的是为了实现列表的下拉刷新、上拉加载，所以选择了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)
 })
 }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue的fullpage.js单页滚动插件

    基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu

  • vue2.0 better-scroll 实现移动端滑动的示例代码

    vue2.0 better-scroll 实现移动端滑动的示例代码

    写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值 4)左侧的分类中,使与 index 相应

  • vue利用better-scroll实现轮播图与页面滚动详解

    vue利用better-scroll实现轮播图与页面滚动详解

    前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码

  • vue滚动插件better-scroll使用详解

    vue滚动插件better-scroll使用详解

    本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1.2 better-scroll安装 npm install better-scroll --save 安装至项目中 1.3 better-scroll使用 better-scroll常见应用场景(列表

  • 详解 vue better-scroll滚动插件排坑

    详解 vue better-scroll滚动插件排坑

    BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的.要不...哈哈.个人感觉还是很好用的.这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里. 滚动原理 better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 featur

  • vue.js2.0 实现better-scroll的滚动效果实例详解

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. <template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWr

  • vue使用 better-scroll的参数和方法详解

    格式:var obj = new BScroll(object,{[option1,],.,.}); 注意: 1.要确保object元素的高度比其父元素高 2.使用时,一定要确保object所在的dom渲染后,再用上面的语句,或者obj.refresh() Options 参数 startX: 0 开始的X轴位置 startY: 0 开始的Y轴位置 scrollY: true 滚动方向为 Y 轴 scrollX: true 滚动方向为 X 轴 click: true 是否派发click事件,通常

  • vue better scroll 无法滚动的解决方法

    vue better scroll 无法滚动的解决方法

    使用vue+better scroll 今天实现切换用户后查询用户订单列表的一个功能,在实例化betterscroll时,因为有的用户没有订单,切换用户后会出现订单列表无法滚动的问题.先放代码: <!-- 订单列表 --> <div id="order-list" ref="scrollWrap"> <ul v-if="orderLists.length > 0"> <li v-for="

  • vue滚动轴插件better-scroll使用详解

    跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧menu栏对应右侧foods栏相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用: 一.项目中下载,并引入 在配置文件package.json中引入版本 "dependencies": { "better-scroll": "^0.1.7" } 然后进入项目目录,打开cmd更新配置 npm i (i是install缩写) 最后引入,比如我

  • Vue + better-scroll 实现移动端字母索引导航功能

    vue+ better-scroll 实现移动端歌手列表字母索引导航.算是一个学习笔记吧,写个笔记让自己了解的更加深入一点. Demo:list-view,使用 chrome 手机模式查看.换成手机模式之后,不能滑动的话,刷新一下就 OK 了. Github: 移动端字母索引导航 效果图 配置环境 因为用到的是 vue-cli 和 better-scroll,所以首先要安装 vue-cli,然后再 npm 安装better-scroll. 简单介绍一下 better-scroll: better

  • 详解无限滚动插件vue-infinite-scroll源码解析

    最近在项目中遇到一个需求,有一个列表需要滚动加载,类似于微博的无限滚动.当时第一反应时监听滚动事件,在判断滚动到达底部时加载下一页,同时心里也清楚,监听滚动事件需要做好截流.顺手搜索了下发现有一个现成的插件vue-infinite-scroll,用法也很简单,于是乎就用了起来. 需求上线后,对它的实现挺好奇的,于是研究了一番源码,这篇文章就是源码解析笔记. 插件使用方法 这是一个 vue 的指令,按照 github 仓库上的介绍,用法挺简单的,例如: <div class="app&quo

  • vue better-scroll插件使用详解

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScroll(Dom对象, {//options startX: 0, star

随机推荐