鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 初次接觸better-scroll,想請問前輩,為什么better-scroll

初次接觸better-scroll,想請問前輩,為什么better-scroll初始化后就是不能滾動?

各位前輩好,今天初次接觸better-scroll這個插件,試了N多次還是無法解決無法滾動的問題,所以想請教一下!

這個是我寫的結(jié)構(gòu),我先把數(shù)據(jù)全部寫在上面
圖片描述

然后我是在組件里面引用的
圖片描述

最后在mounted這個鉤子函數(shù)里面初始化圖片描述

但是瀏覽器查看還是無法滾動,看到初始化出來了,就是不能滾動
圖片描述

請問前輩我是少了哪個步驟了嗎??還是鉤子函數(shù)不是這個mounted,試了好久都不行,希望能到前輩指教??!拜托了!

回答
編輯回答
陌璃

你要保證滾動內(nèi)容容器總高度大于外層展示容器。

<div id="demo01">
    <div class="scrollBox">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<script>
    new BScroll(document.getElementById('demo01'),{
        bounce:true,
        momentumLimitDistance:5
    });
</script>

也就是說demo01的高度要小于scrollBox的高度

2017年12月26日 17:28
編輯回答
若相惜

你這個說的很模糊,我所認識的better-scroll不滾動有幾種可能,不過原因大多數(shù)都是因為類容沒有加載完導(dǎo)致的,比如隱藏切換顯示,這樣都會導(dǎo)致插件參數(shù)的scrollerHeight:0,一般來說調(diào)用一下refresh()就行了。
所以經(jīng)常寫法為

    this.$nextTick(()=>{
                  if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.rongqi, {
                      click: true
                    });
                  } else {
                    this.scroll.refresh();
                  };
            });

看看你這兩個參數(shù)是否和我一樣hasVerticalScroll為true,scrollerHeight有值
圖片描述

2017年2月19日 23:15