微信小程序scroll-view不能横行显示的问题，以及隐藏scroll-view滚动条

最新推荐文章于 2025-05-20 10:45:51 发布

原创

最新推荐文章于 2025-05-20 10:45:51 发布 · 2.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #scroll-view不能横行显示 #隐藏scroll-view滚动条 #scroll-view

最近因为项目需要，不定期的总结点东西，还有开发遇到的各种坑和大家分享下吧。

我想在页面顶部展示种类的tab，从后台动态获取并显示出来，自己也了解一些微信的小组件，就感觉scroll-view挺适合，然后就去官网API文档找找。微信官方给的 scroll-view 组件说明，只说了 “使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。” 那么横行滚动弄上就需要给 scroll-view 设置一个 widht 呗，照着样子弄，但是并不能横行。自己实验了下，纵行滚动没毛病，但横行就出现问题了。然后一阵捣鼓都不知何处出了问题，后来结合微信的小程序示例和Github上的官方demo，这才解决了问题。

自己的页面代码是这样的

<scroll-view class="scrolltab" scroll-x="true">
    <block wx:for="{
  
  {categoryList}}"  wx:key="*this">
      <view data-index="{
  
  {index}}" bindtap="clickItem" class="scrolltab item"><view>{
  
  {item}}</view></view>
    </block>
</scroll-view