vue-mobile-scroll

一个移动端滚动组件，基于 better-scroll 2.0 版本封装,支持简单的下拉刷新，上拉加载

``
npm install vue-mobile-scroll --save
`

基础用法

`js
import Scroll from "vue-mobile-scroll";
import "vue-mobile-scroll/lib/vue-mobile-scroll.css";
const { VerticalScroll } = Scroll;
`

`css
html,
body,
#app {
height: 100%;
width: 100%;
}
// 直接包裹 vue-mobile-scroll 的 div
.outer-box {
width: 100%;
height: 100%;
}
`

`html


`js
// 内置很多方法可以调用，如： getScrollExample, autoPullUpLoad, ... (见 packages 文件夹中原组件)
如： this.$refs.scrollRef.autoPullDownRefresh();

//
{
components: {
VerticalScroll,
},
methods: {
// 下拉刷新
pullingDownRefresh(finish) {
// 模拟接口请求
setTimeout(() => {
this.list = [this.getRandomString(), this.getRandomString()];

// 刷新完成后调用这个回调函数
finish();
}, 2000);
},
// 上拉加载
pullUpLoad(finish) {
// 模拟接口请求
setTimeout(() => {
this.list = [
...this.list,
this.getRandomString(),
];
// 完成后调用这个回调函数，它接收一个参数,没有更多数据就传true,否则不传
finish(true);
}, 2000);
}
}
}
`

参数

注：传入参数时只需要传需要的即可，无需全部传一遍，以下都是默认的配置，传入的属性会替换默认配置

#### option

better-scroll 原始配置

`js
{
// probeType 可选值：1、2、3
// 1：非实时（屏幕滑动超过一定时间后）派发scroll 事件；
// 2：会在屏幕滑动的过程中实时的派发 scroll 事件；
// 3：不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
probeType: 2,
click: true, // 是否可以点击
freeScroll: false, //自由滚动
scrollX: false,
bounce: true, //是否开启回弹动画
scrollbar: false, //是否显示滚动条

// 以下两个参数无需手动配，只需监听相应的事件都可以用了
pullDownRefresh: false, // 是否支持下拉刷新
pullUpLoad: false, // 是否支持上拉加载
}
`

#### refreshConfig

下拉刷新配置

`js
{
threshold: 80, // 配置顶部下拉的距离来决定刷新时机
stop: 50, // 回弹悬停的距离
loadingType: 6, // loading图的类型 (1 到 12 的整数)
initText: '继续下拉', // 初始文字
triggerText: '松手刷新', // 过下拉临界点的文字
finishText: '已刷新', // 刷新完成后的文字
}
`

#### pullUpLoadConfig

上拉加载配置

`js
{
loadingType: 4, // loading图的类型 (1 到 12 的整数)
stop: 50, // 回弹悬停的距离
threshold: -40, // 正数代表距离底部 threshold 像素时触发，负数代表越过越过底部触发事件
}
``