前言
最近在开发公司网站项目的h5版本，技术栈是vue，为了更好的优化滚动效果，以及实现一些相关的功能，就选择使用better-scroll这个插件。觉得效果很不错，我又在自己写着玩的博客中集成了这个插件。
使用经验
安装（推荐安装core版本按需引入插件）
yarn add @better-scroll/core
在vue中的使用
封装一个滚动组件Scroll.vue
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
data() {
return {
bs: "",
positionY:0
};
},
props: {},
mounted() {
this.bs = new BScroll(this.$refs.wrapper, {
click: true,
observeDOM: true,
observeImage: true,
scrollX: false,
probeType: 3,
useTransition: false,
mouseWheel: true,
});
},
methods: {
scrollToEl(el, time = 500) {
this.bs.scrollToElement(el, time);
},
},
};
</script>
<style scoped></style>
index.vue
<template>
<bscroll>
//content..........
</bscroll>
</template>
<script>
methods: {
btnTab(index) {
this.currentIndex = index;
},
btnTopTab(index) {
this.currentTopIndex = index;
if (index === 0) {
this.$refs.scrollRef.scrollToEl(this.$refs.topControlRef);
} else if (index === 1) {
this.$refs.scrollRef.scrollToEl(this.$refs.explainRef);
} else if (index === 2) {
this.$refs.scrollRef.scrollToEl(this.$refs.questionRef);
}
},
},
</script>
使用组件后通过this.$refs.bscroll.bs的方式获取插件实例使用方法
在react中使用
组件bscroll.tsx
import { FC, ReactElement, useEffect, useRef, useState } from "react";
import BScroll from "@better-scroll/core";
import { BScrollWrapper } from "./style";
import ObserveDOM from "@better-scroll/observe-dom";
import ObserveImage from "@better-scroll/observe-image";
import Pullup from "@better-scroll/pull-up";
//type
import BScrollInstance from "@better-scroll/core";
interface Ipullup {
pullup:(x?:BScrollInstance)=>void;
}
BScroll.use(ObserveDOM);
BScroll.use(ObserveImage);
BScroll.use(Pullup);
const Home: FC<Ipullup> = (props): ReactElement => {
const wrapper = useRef<any>(null);
const [bscroll, setbscroll] = useState<BScrollInstance>();
useEffect(() => {
const bs: BScrollInstance = new BScroll(wrapper.current, {
click: true,
scrollY: true,
observeDOM: true,
observeImage: true,
pullUpLoad: {
threshold: -100
},
useTransition: false,
mouseWheel: true,
});
setbscroll(bs);
}, []);
useEffect(() => {
props.pullup(bscroll)
},[props,bscroll]);
return <BScrollWrapper ref={wrapper}>{props.children}</BScrollWrapper>;
};
export default Home;
index.tsx
......
const pullup = (bs?:BScrollInstance) => {
bs
? bs.on("pullingUp", () => {
if (pageTotal === page) {
console.log("没有更多内容了");
} else {
dispatch(getPageAction(page + 1));
}
bs.refresh();
bs.finishPullUp();
})
: console.log();
};
return (
<BScroll pullup={pullup}>
......
</BScroll>
详细的配置信息请看官网 better-scroll.github.io/docs/zh-CN/
问题和解决办法
1、在第一次使用时会出现无法滚动的情况，原因是滚动需要内容的高度小于容器的高度
2、如果你的content里有很多的图片，那么会出现滚动到内容的一半就滚不下去了这种情况，原因是img标签是异步加载，img还没有加载完，better-scroll就计算了高度，导致了计算高度的不准确；如果你有其他操作会改变dom的高度，这也会导致计算高度不准确。
better-scroll 有refresh()可以重新计算高度，在监听图片加载完成调用
或使用better-scroll的插件observe-dom和observe-image
安装yarn add @better-scroll/observe-dom yarn add @better-scroll/observe-image
挂载到实例bs.use(observe-dom),配置到better-scroll即可
3、在项目使用better-scroll手动触摸屏幕让滑动停止，会有抖动现象
作者也做出了解释，在属性中配置useTransition: false使用js动画就能解决。
