使用better-
scroll实现下拉刷新和上拉加载功能，需要先安装
better-
scroll插件。
1. 安装
better-
scroll
```bash
npm install
better-
scroll --save
```
2. 导入
better-
scroll
```javascript
import B
Scroll from '
better-
scroll'
```
3. 创建
better-
scroll实例
```javascript
mounted() {
this.init
Scroll()
},
methods: {
init
Scroll() {
this.
scroll = new B
Scroll(this.$refs.wrapper, {
probeType: 3, // 实时派发
scroll事件
click: true, // 开启
点击事件
pullDownRefresh: true, // 开启
下拉刷新
pullUpLoad: true // 开启上拉加载
})
}
},
```
4. 监听
下拉刷新和上拉加载
事件
```javascript
this.
scroll.on('pullingDown', () => {
//
下拉刷新业务逻辑
this.
scroll.finishPullDown() // 完成
下拉刷新
this.
scroll.refresh() // 重新计算
滚动区域
})
this.
scroll.on('pullingUp', () => {
// 上拉加载业务逻辑
this.
scroll.finishPullUp() // 完成上拉加载
this.
scroll.refresh() // 重新计算
滚动区域
})
```
5. 在模板
中添加DOM元素
```html
<div class="wrapper" ref="wrapper">
<div class="content">
<!-- 内容 -->
</div>
</div>
```
6. 完整代码示例
```html
<template>
<div class="
scroll-wrapper">
<div class="wrapper" ref="wrapper">
<div class="content">
<ul>
<li v-for="item in list" :key="item.id">{{ item.title }}</li>
</ul>
</div>
<div class="pullup-wrapper">
<div class="pullup">
<span v-show="!isPullUpLoad">上拉加载更多</span>
<span v-show="isPullUpLoad">正在加载
中...</span>
</div>
</div>
</div>
</div>
</template>
<script>
import B
Scroll from '
better-
scroll'
export default {
data() {
return {
list: [], // 列表数据
isPullUpLoad: false // 是否正在上拉加载
}
},
mounted() {
this.init
Scroll()
},
methods: {
init
Scroll() {
this.
scroll = new B
Scroll(this.$refs.wrapper, {
probeType: 3, // 实时派发
scroll事件
click: true, // 开启
点击事件
pullDownRefresh: true, // 开启
下拉刷新
pullUpLoad: true // 开启上拉加载
})
// 监听
下拉刷新和上拉加载
事件
this.
scroll.on('pullingDown', () => {
//
下拉刷新业务逻辑
this.
scroll.finishPullDown() // 完成
下拉刷新
this.
scroll.refresh() // 重新计算
滚动区域
})
this.
scroll.on('pullingUp', () => {
// 上拉加载业务逻辑
this.isPullUpLoad = true // 正在上拉加载
setTimeout(() => {
this.isPullUpLoad = false // 完成上拉加载
this.
scroll.finishPullUp() // 完成上拉加载
this.
scroll.refresh() // 重新计算
滚动区域
}, 1000)
})
}
}
}
</script>
<style>
.
scroll-wrapper {
height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
overflow: auto;
}
.pullup-wrapper {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.pullup {
height: 40px;
line-height: 40px;
}
</style>
```
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
