? ? ? ? ? ? ? ? ? ? ? ? ? ? ?What is better-scroll ??
更好的滾動是一個插件，其目的是解決移動環(huán)境下的滾動環(huán)境（也許支持PC方面的未來）。核心的靈感來自iscroll實(shí)施，所以更好的滾動API是對整個iscroll兼容。什么是更多，更好的滾動也延伸的一些特點(diǎn)和優(yōu)化性能的基礎(chǔ)上iscroll示损。這里比較下區(qū)別
更好的滾動是用普通JavaScript實(shí)現(xiàn)的，這意味著它是不依賴的嚷硫。編譯的代碼的大小是46 KB检访，26 KB的壓縮后，經(jīng)過GZIP只有7KB仔掸。更好的滾動是一個非常輕量級的JavaScript庫脆贵。
better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫嘉汰，
better-scroll 很強(qiáng)大丹禀，不僅可以做普通的滾動列表，還可以做輪播圖鞋怀、picker 等等双泪。
插件的作用：
1.?在我們?nèi)粘５囊苿佣隧?xiàng)目開發(fā)中，處理滾動列表是再常見不過的需求了密似，焙矛，可以是豎向滾動的列表。
2.也可以是橫向滾動的導(dǎo)航欄残腌。
（我們在實(shí)現(xiàn)這類滾動功能的時候村斟，會用到我寫的第三方庫，better-scroll）
better-scroll 的滾動原理：
不少同學(xué)可能用過 better-scroll抛猫，很多反饋?zhàn)疃嗟膯栴}是：
?better-scroll 初始化了蟆盹， 但是沒法滾動。
不能滾動是現(xiàn)象闺金，我們得搞清楚這其中的根本原因逾滥。在這之前，我們先來看一下瀏覽器的滾動原理：
瀏覽器的滾動條大家都會遇到败匹，當(dāng)頁面內(nèi)容的高度超過視口高度的時候寨昙，會出現(xiàn)縱向滾動條；當(dāng)頁面內(nèi)容的寬度超過視口寬度的時候掀亩，會出現(xiàn)橫向滾動條舔哪。也就是當(dāng)我們的視口展示不下內(nèi)容的時候，會通過滾動條的方式讓用戶滾動屏幕看到剩余的內(nèi)容槽棍。
那么對于 better-scroll 也是一樣的道理捉蚤，我們先來看一下 better-scroll 常見的結(jié)構(gòu)：
那么，我們怎么初始化 better-scroll 呢推捐，那么初始化代碼如下：
import? BScroll? from'better-scroll'裂问；
let? wrapper =? document.querySelector('.wrapper')；
let? scroll = new BScroll(wrapper,{ })牛柒；
better-scroll 對外暴露了一個 BScroll 的類堪簿，我們初始化只需要 new 一個類的實(shí)例即可。第一個參數(shù)就是我們 wrapper 的 DOM 對象皮壁，第二個是一些配置參數(shù)椭更，具體參考better-scroll 的文檔。
better-scroll 的初始化時機(jī)很重要蛾魄，因?yàn)樗诔跏蓟臅r候虑瀑，會計(jì)算父元素和子元素的高度和寬度，來決定是否可以縱向和橫向滾動滴须。因此舌狗，我們在初始化它的時候，必須確保父元素和子元素的內(nèi)容已經(jīng)正確渲染了扔水。如果子元素或者父元素 DOM 結(jié)構(gòu)發(fā)生改變的時候痛侍，必須重新調(diào)用scroll.refresh()方法重新計(jì)算來確保滾動效果的正常。所以同學(xué)們反饋的 better-scroll 不能滾動的原因多半是初始化 better-scroll 的時機(jī)不對铭污，或者是當(dāng) DOM 結(jié)構(gòu)發(fā)送變化的時候并沒有重新計(jì)算 better-scroll恋日。
