README
本组件扩展自better-scroll,需要安装better-scroll依赖
better-scroll的文档连接 https://ustbhuangyi.github.io/better-scroll/#/
组件可以传递的参数如下:
背景色: :backgroundColor="#fff000"或者不传,默认:#F5F5F5
距离顶部高度: top="100px",默认为:0
距离底部高度: bottom="40px",默认为:0
是否启用弹性模式: :bounce="true",默认为:false
是否显示滚动条: :scrollbar="true",默认为:false
要启用下拉刷新的功能,请传递配置对象: :pullDownRefresh="{threshold: 40, stop: 40, text: '刷新成功'}"
其中threshold代表回弹的位置,stop代表停止的位置,如果不想启用,可以不传
要启用上拉加载的功能,请传递配置对象: :pullUpLoad="{threshold: 0, text: { more: '上拉加载更多', noMore: '我是有底线的' } }"
组件可以调用的API如下:
销毁滚动组件: this.$refs.scroll && this.$refs.scroll.destroy();
禁用滚动组件:this.$refs.scroll && this.$refs.scroll.disable();
启用滚动组件:this.$refs.scroll && this.$refs.scroll.enable();
启用上拉加载功能:this.$refs.scroll && this.$refs.scroll.enablePullUp()
;
禁用上拉加载功能: this.$refs.scroll && this.$refs.scroll.disablePullUp();
刷新滚动组件,防止在滚动组件中动态添加内容后,滚动组件的高度没有重置.
不过组价内部已经设置了内容高度监听,会自动刷新出高度,不用过度担心,不过还用要说一下调用方法:
this.$refs.scroll && this.$refs.scroll.refresh();
让滚动组件滚动到某个位置: this.$refs.scroll && this.$refs.scroll.scrollTo(offsetX,offsetY,time);
一般来说垂直的滚动组件是要设置 offsetX = 0; offsetY为你需要的高度; time为滚动事件
滚动到某个元素位置: this.$refs.scroll && this.$refs.scroll.scrollToElement(el, time, offsetX, offsetY);
组件下拉刷新和上拉加载使用方式如下:
<template>
<div id="app" class="app-container">
<app-scroller
ref="scroll"
:bounce="true"
:scrollbar="true"
:pullDownRefresh="pullDownRefresh"
:pullUpLoad="pullUpLoad"
@on-pulling-down="afterPullDown"
@on-pulling-up="afterPullUp">
<div>
<div v-for="(item,index) in listNum" :key="index">
滚动组件里面的内容
</div>
</div>
</app-scroller>
</div>
</template>
<script>
import AppScroller from "@/components/common/AppScroller"
export default {
data() {
return {
pullDownRefresh: {
threshold: 40,
stop: 40,
text: '刷新成功'
},
pullUpLoad: {
threshold: 0,
text: {
more: '上拉加载更多',
noMore: '我是有底线的'
}
},
listNum: 30
}
},
methods: {
//下拉刷新,手指touch结束的时候触发的事件
afterPullDown() {
this.listNum = 30;
//完成下拉刷新
this.$refs.scroll && this.$refs.scroll.forceUpdate();
},
//上拉加载,手指touch结束时触发的事件
afterPullUp() {
this.listNum = this.listNum + 30;
//完成上拉加载
this.$refs.scroll && this.$refs.scroll.forceUpdate();
//禁用上拉加载
this.$refs.scroll && this.$refs.scroll.disablePullUp();
}
},
created() {
},
components: {
AppScroller
}
};
</script>
<style lang="less" scoped>
.app-container {
height: 100%;
position: relative;
width: 100%;
}
</style>