在react項(xiàng)目中使用better-scroll
betterscroll介紹：他是一個(gè)可以用在移動(dòng)端任意滾屏場(chǎng)景的插件（列表滾動(dòng)，輪播等....）
使用了bs可以讓滾動(dòng)變得非常絲滑
betterscroll的使用：
1. 下載安裝
yarn add better-scroll -S
2. 引入
import BScroll from 'better-scroll'
3. 使用
????3.1 確保當(dāng)前要滾動(dòng)的div下面要套一個(gè)空div
????<div 要滾動(dòng)的元素>
????????<div>
???????????????//把所有兒子放到此div中
????????</div>
????</div>
????????3.2 在合適的位置初始化new BScroll
????????????生命周期
????????????new BScroll('#xxxxxxxx',第二個(gè)參數(shù))
????????????div的高度必須固定，父級(jí)逐層檢查
????????????點(diǎn)擊如何讓底部div滾動(dòng)：
????????????????????1. 給右側(cè)滾動(dòng)條添加點(diǎn)擊事件，通過傳參，傳遞當(dāng)前點(diǎn)擊的title名字
????????????????????2. 在點(diǎn)擊事件中，讓底部div用api函數(shù)，滾動(dòng)到指定位置
????????????????????????this.xxxx.scrollToElement('#要滾動(dòng)到的divid', 動(dòng)畫時(shí)長(zhǎng))
????????????????????????//這里注意需要先給底部的每個(gè)div添加id
? ? ? ? ? ? ? ? ? ? 3.第二個(gè)參數(shù)，是一個(gè)對(duì)象，關(guān)于better scroll的配置項(xiàng)，
? ? ? ?let? ? scrollObj? = new BScroll("#XXX",{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? click: true,? // 是否開啟其內(nèi)容可以觸發(fā)點(diǎn)擊事件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scrollX: ture,? // 是否開啟橫向滾動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? eventPassthrough: 'vertical',????// 是否開啟橫向滾動(dòng)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?probeType: 3? //? sorll觸發(fā)事件的方式。
?????? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
? ??????????????????scrollObj .on("scorll",callback)? //監(jiān)聽滾動(dòng)事件
? ? ? ? ? ? ? ? ? ? 具體配置可參考：?https://www.bookstack.cn/books/better-scroll
在react項(xiàng)目中還原項(xiàng)目配置--- yarn eject
? ?使用yarn eject 可以將原本項(xiàng)目隱藏的webpack等配置還原出來。
? ?讓react支持less
1.還原react項(xiàng)目
2.在config文件夾下找到webpack.config.js文件
3.打開，找到支持css以及sass語(yǔ)言的配置項(xiàng)。
4.仿照支持sass語(yǔ)言的配置項(xiàng)，寫一份支持less的配置
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
