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)

})

}

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

以上是 vue使用better-scroll实现下拉刷新、上拉加载 的全部内容, 来源链接: utcz.com/z/318854.html

回到顶部