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

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

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

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

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

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

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

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

回答
編輯回答
陌璃

你要保證滾動(dòng)內(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
編輯回答
若相惜

你這個(gè)說的很模糊,我所認(rèn)識(shí)的better-scroll不滾動(dòng)有幾種可能,不過原因大多數(shù)都是因?yàn)轭惾輿]有加載完導(dǎo)致的,比如隱藏切換顯示,這樣都會(huì)導(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();
                  };
            });

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

2017年2月19日 23:15