vue-scroll的高度设置

(文末是如何设置bar的高度）

问题概述：

最近要做一个滑动的tab列表，列表有两级（两行），第二行需要滑动。整个列表容器设置了高度为88px，每一行设置了高度为44px，但是用了vue-scroll之后，第一行变成了22px多，第二行内容是44px，滚动条还有20px左右。

于是查了一下vue-scroll的设置，有一项是sizeStrategy，默认为‘percent’，即height和width均为100%

// 设置 vuescroll的大小类型， 可选的有percent, number.

// 设置为percent会把 vuescroll 的 height 和 width 设置成100%,

// 设置成number的话 vuescroll 会自动计算父元素的大小，并将height和width设置成对应的数值。

// 提示:如果父元素的尺寸为百分比大小时建议设置成number,如果父元素大小为一个固定的px的值,那么设置为百分比比较合适一些。

所以vue-scroll的高度被设置成了父级的高度88px，这里布局用的flex，按比例缩放了，所以会把第一行挤小，第二行比44px高。

解决办法：

在vue-scrol外边加一层div，并设置高度为44px，这样vue-scroll的高度就是44px*100%=44px了。

 <div  class="tablist">

    <vue-scroll  :ops="ops" >

           <div class="tab" >

                <ul >

                    .........

                </ul>

            </div>

    </vue-scroll>

</div> 

注：在tablist处设44px。而在tab处设置不管用。

待解决问题：试过用tab那个div包裹vue-scroll，vue-scroll里边直接放ul，导致整个页面都是可滑动的。不太懂是什么原因。

tips：

设置bar的高度，直接在bar选项里设置height就行了,默认是6px（设置示例里没有写height，害我试了他写了的好几个属性，然后一气之下直接写了height就好了。。。）

ops：{

    ...

    bar：{

        height：‘3px’,

        ...

    },

    ...

}