better-scroll的简单使用方法
先说用法,最后有源码
用法
html部分
- scroll实例需使用ref属性指定container
- 滑动作用在container的第一个子元素上
- container需要固定高度
- container需要固定高度
- container需要固定高度
<div ref="scrollWrap">
<div>scroll作用在第一个子元素</div>
<div>不会作用的元素</div>
<div>更不会作用的元素</div>
</div>
js部分
1.引用
import userScroll from '@/views/components/useScroll.js';
export default {
mixins: [userScroll]
}
2.配置
具体配置项参考Better-Scroll
data: {
return {
scrollOption: {
scrollY: true,
click: true,
bounce: true,
tap: true,
mouseWheel: true,
swipeTime: 2500,
swipeBounceTime: 400,
scrollbar: true
},
}
}
3.初始化
mounted () {
// 初始化滚动条
this.scrollInit();
},
4.刷新
在页面变化时使用(如请求了新的数据,页面高度发生变化)
this.scrollRefresh();
5.顶部下拉刷新
配置项
scrollOption: {
pullDownRefresh: {
// 下拉触发阈值 - px
threshold: 60,
// 回弹停留点 - px
stop: 50
},
}
在初始化滚动条实例时使用,在组件中自定义回调函数
// 下拉回调函数
methods: {
// 下拉刷新
callback () {
console.log('pullDown!');
// 执行完成后结束下拉状态
this.scroll.finishPullDown();
},
},
// 加载监听
mounted () {
this.scrollPullDown(this.callback);
}
6.底部上拉加载
配置项
scrollOption: {
pullDownRefresh: {
// 上拉触发阈值 - px
threshold: 60,
},
}
在初始化滚动条实例时使用,在组件中自定义回调函数
// 上拉回调函数
methods: {
// 上拉加载
callback () {
console.log('pullUp!');
// 执行完成后结束上拉状态
this.scroll.finishPullUp();
},
},
// 加载监听
mounted () {
this.scrollPullUp(this.callback);
}
7.销毁
已设置自动执行,解决后顾之忧(o゚v゚)ノ
源码
将这段js代码放入项目文件夹中,使用mixins方式放入需要使用的地方
// 引入
import BScroll from 'better-scroll';
// 配置
const scrollOption = {
scrollY: true,
click: true,
bounce: true,
tap: true,
mouseWheel: true,
swipeTime: 1000,
swipeBounceTime: 400,
scrollbar: true,
pullDownRefresh: false,
pullUpLoad: false
};
export default {
data() {
return {
scroll: null,
scrollCustomOption: null
};
},
methods: {
// 放在mounted里面
scrollInit (customOption) {
this.scrollCustomOption = customOption;
if (this.scroll) {
this.scroll.destroy();
}
this.scroll = null;
// 初始化滚动条
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.scrollWrap, Object.assign({}, scrollOption, customOption));
});
},
// 页面发生改变时使用
scrollRefresh () {
this.scroll.destroy();
this.scrollInit(this.scrollCustomOption);
},
// 下拉刷新方法,初始化时执行
scrollPullDown (callback) {
this.scroll.on('pullingDown', callback);
},
// 上拉加载方法,初始化时执行
scrollPullUp (callback) {
this.scroll.on('pullingUp', callback);
}
},
beforeDestroy () {
// 销毁scroll实例
this.scroll.destroy();
this.scroll = null;
}
};