一、安装环境
"vue": "^2.5.2",
"vue-router": "^3.0.1",
二、所需安装包
"better-scroll": "^1.12.0",
三、所遇问题
项目中，数据请求接口需要指定 ：
- 页数（pageNum）
- 每页数据数量（pageSize）
页数默认是1，起初我请求pageSize为30，这样当数据量超过30时，最早的、多出的数据就无法显示。
四、解决办法
使用 better-scroll 组件 1.12.0版，使用的不是最新版的（因为最新版的示例文档一下子没看懂，咳咳）。
- 首先查看
scroll组件的文件
<template>
<div class="scroll relative" ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'scroll',
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
},
/**
* 列表的数据
*/
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,
startY: 0,
scrollX: this.scrollX
})
Log('scroll', this.scroll);
// 是否派发滚动事件
if (this.listenScroll) {
this.scroll.on('scroll', (pos) => {
this.$emit('scroll', pos)
})
}
// 是否派发滚动到底部事件，用于上拉加载
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
// 滚动到底部
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrollToEnd')
}
})
}
// 是否派发顶部下拉事件，用于下拉刷新
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>
查看 scroll 组件中的方法，找到自己所需要的函数，根据需求，此时我们需要的是 pullup函数，所以我们要在使用到scroll组件的地方，传递（props） pullup为true，用以激活方法。
props：{
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: false
},
}
methods：{
// 是否派发滚动到底部事件，用于上拉加载
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
// 滚动到底部
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrollToEnd')
}
})
}
}
在页面中使用scroll组件
<template>
<scroll :pullup='true' @scrollToEnd='scrollToEnd' >
<order-item @click="click"
v-for="(item,index) in list" >
</order-item>
</scroll>
</template>
<script>
export default {
data(){
return{
pageNum,
pagesCount //用于判断页面是否全部加载完
}
}
methods{
scrollToEnd(){
if(this.pageNum < this.pageCount){
this.pageNum ++ ; //每次加载下一页，都要把页数加一
this.getData();
}
},
async getData() {
let {code, msg, list, page} = await this.$http('smarthos.yygh.apiOrderService.ghBespeakList', {
pageNum: this.pageNum,
pageSize: 10
});
code != 0 && (bus.$emit('msg', msg));
if (code == 0) {
this.pageCount = page.pagesCount;
this.list.length == 0 && (this.show = true);
this.list = this.list.concat(list);
}
},
}
}
</script>
最后实现效果
首次加载，只显示10条数据，屏幕滑到底部就触发scroll事件，加载第二页的10条处数据。
