优化h5的滚动功能：在vue和react中使用better-sroll插件的踩坑笔记

前言

最近在开发公司网站项目的h5版本，技术栈是vue，为了更好的优化滚动效果，以及实现一些相关的功能，就选择使用better-scroll这个插件。觉得效果很不错，我又在自己写着玩的博客中集成了这个插件。

使用经验

安装（推荐安装core版本按需引入插件）

yarn add @better-scroll/core

在vue中的使用

封装一个滚动组件Scroll.vue

index.vue

使用组件后通过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 = (props): ReactElement => {
  const wrapper = useRef(null);
  const [bscroll, setbscroll] = useState();

  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 {props.children};
};

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 (
    
     ......
    

详细的配置信息请看官网
https://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动画就能解决。

点个赞支持一下叭❀