下面是BetterScroll的使用和不能滑动常见的几个问题，以水平滚动为例

一、确认已安装better-scroll

安装：

npm install better-scroll --save

引入：

import BScroll from '@better-scroll/core';

二、保证结构和样式的正确性

滚动的原理官网有介绍，可以移步这里，解释的很清楚，就不再赘述了： better-scroll.github.io/docs/zh-CN/…

<div className="wrpper" ref={divRef}>
    <div className="content">
        {data && data.length > 0 && data.map(item => {
        return (
            <div className="item">
                ...
            </div>
        );
        })}
    </div>
</div>

设置wrpper和content的css属性

.wrpper{
    position: relative; 
    overflow:hidden;
    white-space: nowrap;
    width: 505px;
    .content{
        display:inline-block;
            .item{
                width: 28px;
                height: 28px; 
                display:inline-block;
            }
    }
}

注意：一定要设置wrpper的宽，且content的总宽度大于wrpper的宽度才会滚动起来！

三、确保绑定滚动的时机在元素渲染完毕以后

比如上面的例子中，data是通过接口异步获取的，wrpper绑定滚动的时机在data获取完以及divRef渲染完之后：

useEffect(() => {
    if (data && data.length > 0 && divRef.current) {
        const wrapper:any = divRef.current;
        let cardScroll = new BScroll(wrapper, {
        scrollX: true,
        click: false,
        scrollY: false,
        preventDefault: false,
        probeType: 3,
        bounce: false
        })
    }
}, [data, divRef.current])

四、检查下页面有没有设置禁止滚动

我有个用到BetterScroll的页面是渲染在mask上的，以上问题都没出现，发现mask上设置了禁止滚动，将设置关闭就能滚动了。

<div
    // onTouchMove={(event) => handleTouchMove(event)} // 禁止滚动注释掉
>
    ...
</div>