vue2.0 结合better-scroll 实现下拉加载
一、建议先了解下better-scroll 的介绍
链接：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88
二、npm 安装
npm install better-scroll --save
三、因为项目里面多个页面会用到上拉加载，所以这里先作为组件来使用，在components新建一个文件夹scroll，然后建立子文件scroll.vue
Scroll.vue 里面的代码如下：
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 1
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 数据总量
*/
totalPage: {
type: Number,
default: null
},
/**
* 当前数据
*/
currentPage: {
type: Number,
default: null
},
/**
* 每页数据量
*/
pageSize: {
type: Number,
default: null
},
/**
* 列表的数据
*/
data: {
type: Array,
default: null
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: false
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: false
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 当数据更新后，刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 20
}
},
mounted() {
// 保证在DOM渲染完毕后初始化better-scroll
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX
})
// 是否派发滚动事件
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
me.$emit('scroll', pos)
})
}
// 是否派发滚动到底部事件，用于上拉加载
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
// 滚动到底部
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
if (this.data.length < this.totalPage) {
console.log(11111, '加载更多');
this.$emit('scrollToEnd', this.currentPage + this.pageSize);
}
}
})
}
// 是否派发顶部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on('touchend', (pos) => {
// 下拉动作
if (pos.y > 50) {
this.$emit('pulldown')
}
})
}
// 是否派发列表滚动开始的事件
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
disable() {
// 代理better-scroll的disable方法
this.scroll && this.scroll.disable()
},
enable() {
// 代理better-scroll的enable方法
this.scroll && this.scroll.enable()
},
refresh() {
// 代理better-scroll的refresh方法
this.scroll && this.scroll.refresh()
},
scrollTo() {
// 代理better-scroll的scrollTo方法
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
// 代理better-scroll的scrollToElement方法
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data() {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
</script>
<style scoped>
</style>
接下来就是在需要上拉加载的页面里面引入组件：
<template>
<scroll class="wrapper" :currentPage="page" :data="obj" :pullup="pullup" @scrollToEnd="Init" :totalPage="total" :pageSize="pageSize" v-else>
<div class="List">
<div class="bill_item_box bgf" v-for="(item,index) in obj" :key="index" @click="godesc(item)">
<div class="bill_item">
<div class="bill_lf">
<p class="type">{{item.type}}</p>
<p class="time">{{item.addtime | formatDateDotTime}}</p>
</div>
<div class="bill_gt">
<p class="money_desc color_active" v-if="parseInt(item.amount_in) > 0">+{{item.amount_in}}</p>
<p class="money_desc" v-if="parseInt(item.amount_out) > 0">-{{item.amount_out}}</p>
<img src="/static/images/ic_arrow_right_gray@2x.png" alt="" class="right_icon">
</div>
</div>
</div>
<div class="load-finished" v-show="obj.length > 0">没有更多啦~</div>
</div>
<div class="loading-wrapper" v-show="!obj.length">
<loading></loading>
</div>
</scroll>
</template>
<script>
import Loading from '@/components/loading/Loading';
import Scroll from '@/components/scroll/Scroll'
export default {
name: 'component_name',
components: {
Loading,
Scroll
},
data() {
return {
obj: [], //数据列表
page:0,
pullup: true, // 是否下拉加载
pageSize: 15, // 每页加载数据
loaded: false, // 加载是否完成
total: 0, // 数据总量
}
},
methods: {
async Init(page) {
this.page = page;
try {
let res = await this.$api.getBill(
this.type,
page,
this.pageSize
)
if (res.code == 0) {
let list = res.data.account_list
let total = Number(res.data.count)
this.obj = [...list, ...this.obj]
this.total = total
this.loaded = true
console.log()
} else if (res.code == -1) {
this.loaded = true
}
} catch (error) {
console.error(error)
}
},
},
created() {
this.Init(this.page)
}
}
如果遇到切换选项卡，在点击切换的时候需要
clickTab(tabId) {
if (this.type === tabId) { //如果点击的是当前选项卡，可做从操作不用重复加载
return
}
// this.type = tabId
this.loaded = false
this.obj = []
this.Init()
},
