vue-scroll的高度设置

Posted 2023-03-20

参考技术A (文末是如何设置bar的高度）

问题概述：

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

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

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

解决办法：

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

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

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

tips：

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

Element textarea设置高度与滚动条隐藏

参考技术A 使用Element textarea时，前后填充内容，其高度和滚动条会发生变化，同时滚动条太丑，想用vue-scroll代替，如何设置textarea 最小高度与隐藏滚动条。