在react项目中使用better-scroll

betterscroll介绍：他是一个可以用在移动端任意滚屏场景的插件（列表滚动，轮播等....）

使用了bs可以让滚动变得非常丝滑

betterscroll的使用：

1. 下载安装

yarn add better-scroll -S

2. 引入

import BScroll from 'better-scroll'

3. 使用

    3.1 确保当前要滚动的div下面要套一个空div

    <div 要滚动的元素>

        <div>

               //把所有儿子放到此div中

        </div>

    </div>

        3.2 在合适的位置初始化new BScroll

            生命周期

            new BScroll('#xxxxxxxx',第二个参数)

            div的高度必须固定，父级逐层检查

            点击如何让底部div滚动：

                    1. 给右侧滚动条添加点击事件，通过传参，传递当前点击的title名字

                    2. 在点击事件中，让底部div用api函数，滚动到指定位置

                        this.xxxx.scrollToElement('#要滚动到的divid', 动画时长)

                        //这里注意需要先给底部的每个div添加id

                    3.第二个参数，是一个对象，关于better scroll的配置项，

       let    scrollObj  = new BScroll("#XXX",{

                                          click: true,  // 是否开启其内容可以触发点击事件

                                          scrollX: ture,  // 是否开启横向滚动

                                          eventPassthrough: 'vertical',    // 是否开启横向滚动

                                           probeType: 3  //  sorll触发事件的方式。

                                  })

                    scrollObj .on("scorll",callback)  //监听滚动事件

                    具体配置可参考： https://www.bookstack.cn/books/better-scroll

在react项目中还原项目配置--- yarn eject

   使用yarn eject 可以将原本项目隐藏的webpack等配置还原出来。

   让react支持less

1.还原react项目

2.在config文件夹下找到webpack.config.js文件

3.打开，找到支持css以及sass语言的配置项。

4.仿照支持sass语言的配置项，写一份支持less的配置