scroll-view的横向滚动

最新推荐文章于 2025-11-10 07:52:08 发布

原创最新推荐文章于 2025-11-10 07:52:08 发布 · 3.2w 阅读

54 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文分享了在使用scroll-view实现横向滚动时遇到的问题及解决方案，包括如何利用display:inline-block和white-space:nowrap属性，以及添加左右渐变修饰来美化界面。

部署运行你感兴趣的模型镜像

本来以为实现一个横向滚动的view很简单，但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。

scroll-view的内层view元素需要：

display: inline-block

scroll-view的外层元素需要：

white-space: nowrap

使得内部组件不换行。

再加上一些左右空行的渐变修饰，使得一个简单的横向滚动元素比较美观。

wxml:

<view class="skill-sequence-panel-content-wrapper"> 
    <!--左边虚化-->
    <view class="hide-content-box hide-content-box-left"></view>
    <!--右边虚化-->
    <view class="hide-content-box hide-content-box-right"></view>
    <!--横向滚动-->
    <scroll-view class="skill-sequence-panel-content" scroll-x>
        <view class="skill-sequence-skill-wrapper"
            wx:for="{{sequence}}" wx:key="{{index}}"
        >
            ...
        </view>
    </scroll-view>
</view>

wxss:

/*scroll-view外层*/
.skill-sequence-panel-content-wrapper{
  position: relative;
  height: 55px;
  white-space:nowrap;
  padding: 2px 10px;
}
/*左右渐变遮罩*/
.hide-content-box{
  position:absolute;
  top:0;
  height: 100%;
  width:32px;
  z-index: 2;
}
.hide-content-box-left{
  left:0;
  background-image: linear-gradient(to left,rgba(255,255,255,0) ,#f3f3f3 60%);
}
.hide-content-box-right{
  right:0;
  background-image: linear-gradient(to right,rgba(255,255,255,0) ,#f3f3f3 60%);
}
/*scroll-view本身*/
.skill-sequence-panel-content{
  min-width:100%;
}
/*scroll-view内层*/
.skill-sequence-skill-wrapper{
  margin-left: 2px;
  display: inline-block;
}
/*设置空白以保持美观*/
.skill-sequence-panel-content .skill-sequence-skill-wrapper:first-child{
  margin-left: 18px;  
}
.skill-sequence-panel-content .skill-sequence-skill-wrapper:last-child{
  margin-right: 16px;  
}

效果如图：