使用better-scroll橫向滾動2018-10-17

使用better-scroll要使內層容器寬度大于外層容器才可以滾動,當內層容器寬度等于外層容器時,無法滾動,這時候就需要動態(tài)設置內層容器寬度。


計算內容容器寬度并賦值給dom, dom更新之后初始化better-scroll即可,傳入?yún)?shù)scrollX表示橫向滾動,eventPassthrough:vertical表示在橫豎滾動同時存在時,不會互相影響

eventPassthrough類型: String默認值:'' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可選值:'vertical'、'horizontal' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 作用:有時候我們使用 better-scroll 在某個方向模擬滾動的時候,希望在另一個方向保留原生的滾動(比如輪播圖,我們希望橫向模擬橫向滾動,而縱向的滾動還是保留原生滾動,我們可以設置 eventPassthrough 為 vertical;相應的,如果我們希望保留橫向的原生滾動,可以設置eventPassthrough為 horizontal)。備注:eventPassthrough 的設置會導致其它一些選項配置無效,需要小心使用它。

注意:獲取的是內容容器的寬度,而使用better-scroll制造滾動時,獲取的是外部 wrapper



報錯:

better-scroll報錯類似 children undefined的錯誤,解決:更改dom名稱,不要使用swiper-area這樣的格式。js中的名稱名字要完全一樣。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 謝謝作者的文章 非常喜歡 請允許收藏! 博客園首頁博問閃存新隨筆訂閱管理 vue之better-scroll的封裝...
    peng凱閱讀 16,700評論 2 5
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,152評論 1 92
  • BetterScroll號稱目前最好用的移動端滾動插件,因此它的強大之處肯定是存在的。要不...哈哈。個人感覺還是...
    zhanzhan_wu閱讀 2,200評論 1 3
  • 凡事預則立,不預則廢。 小時候在田間拿鐮刀割麥,發(fā)現(xiàn)一個有趣的現(xiàn)象:經(jīng)驗豐富的老農總是天蒙蒙亮就起身,吃喝完畢來到...
    群峰閱讀 324評論 0 0
  • 碧生源牌常菁茶讓身體變得異常輕松 我這個人非常的挑剔,對于減肥產(chǎn)品有自己的看法,之前為了確保產(chǎn)品質量,一直都在藥店...
    嘉美小喇叭閱讀 239評論 0 0

友情鏈接更多精彩內容