让移动端页面滚动更丝滑的better-scroll

在移动端页面中，长列表是非常常用的组件之一，除了考虑到高度适配的问题，还要考虑如何让列表滚动时更加平滑。

利用 better-scroll 可以为移动端（PC 也支持）各种滚动场景提供丝滑的滚动效果。

better-scroll 支持的滚动的形式也有多种：

效果

安装和引入

安装：

npm install @better-scroll/core --save

或者：

yarn add @better-scroll/core

引入：

import BScroll from '@better-scroll/core'

代码实现

better-scroll 操作比较简单，核心语句是：

let bs = new BetterScroll('.wrapper', {})

默认情况下，第二个参数可以省略，如果需要配置一些其它方向、带有效果的滚动，需要初始化的时候传入第二个参数。

可选参数如下：

其它细节可以参考 better-scroll 中文文档

整体代码：

constructor(props) {
    this.state = {
        list:[]
    }
    axios({
      url: 'https://...',
      method:'get'
    }).then(res=>{
        this.setState({
            list: res.data.data
        },()=> {
            new BetterScroll('.wrapper')
            // 不需要在这里更新，因为异步代码中setState表现为同步
        })
    }).catch(err=>{})
}

render() {
    return <div>
        <input onInput={this.handelInput} />
        <div className="wrapper" style={{height: '500px',overflow: 'hidden'}}>
            <div className="content">{
                {
                    this.state.list.map(item=>{
                        return <ul key={item.id}>
                            <li>{item.name}</li>
                        </ul>
                    })
                }
            </div>
        </div>

    </div>
}

注意事项

1. 实现better-scroll，外层 wrapper 容器内部一定要有className="content"这一层结构，否则可能会无法滚动。

2. 如果是在 React 中要注意一点， setState 是异步的，要 DOM 创建完成后再创建实例。比如：

   

   或者在 setTimeout 中：

   

3. 如果数据是接口请求回来的，可以直接放在setState外面。React 异步代码中 setState 表现为同步