scroll-view使用

最新推荐文章于 2025-06-12 16:53:02 发布

原创最新推荐文章于 2025-06-12 16:53:02 发布 · 6.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

使用技巧同时被 2 个专栏收录

7 篇文章

订阅专栏

小程序

6 篇文章

订阅专栏

本文介绍了在小程序中使用scroll-view组件实现横向滚动时遇到的问题及解决方案。通过设置scroll-x属性，white-space样式以及调整CSS结构，成功实现横向滚动。讨论了使用">"选择器可能造成的影响，并欢迎读者解答为何如此。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序官方组件scroll-view使用

横向滚动

在 scroll-view 横向滚动的时候遇到了一点麻烦，就是不管怎么设置scroll-view，但是scroll-view横向滚动就是不生效，看了很多教程，基本围绕着三个点来说。

1、设置组件属性scroll-x，直接写上scroll-x或者scroll-x="true"都可以。
2、设置组件css ：white-space: nowrap;
3、设置组件宽度
其他的更是五花八门
但是我逐个试了，有的有效，更多的是无效的。

于是我是用成功案例，逐个排查原因，发现是我的css样式问题。具体是什么原因呢？

wxml文件

以下是我的一个wxml结构


<view class="m-tab">
  <scroll-view class="scroll" scroll-x="true">
    <view class="item" wx:for="{{30}}" wx:key="{{index}}">菜单{{index+1}}</view>
  </scroll-view>
</view>

wxss文件

这是我的wxss


.m-tab{
    height: 100rpx;
    padding: 20rpx;
    background: #fff;
    
}
.m-tab .scroll{
  white-space: nowrap;
}
.m-tab .scroll >.item{
  width: 160rpx;
  height: auto;
  margin-right: 23rpx;
  display: inline-block;
  line-height: 100rpx;
}

出于个人习惯问题，我写css样式喜欢是用这种嵌套风格，一个模块下包裹着子元素。
但是这个css是没办法让组件横向滚动的，可能会有人质疑说，你都没有给组件设置宽度。
但是我将css做了一个小小的改动之后：


.m-tab{
    height: 100rpx;
    padding: 20rpx;
    background: #fff;
    
}
.m-tab .scroll{
  white-space: nowrap;
}
.m-tab .scroll .item{
  width: 160rpx;
  height: auto;
  margin-right: 23rpx;
  display: inline-block;
  line-height: 100rpx;
}

发现组件可以正常的横向滚动了，而我仅仅只是将.scroll > .item的直接父子关系去掉了，也没有设置宽度。

总结

后面我再利用这个样式进行测试，上面说的三个条件，设置scroll-x毫无疑问是需要的，另外还需要设置white-space: nowrap;，这个在m-tab父级或者直接设置在.scroll都没问题。其他的…见仁见智。
虽然做出来了，但是原理我还不是很懂，为什么加上">"就不行了？有人可以解答一下吗？