我是 PHP 程序员

本来以为实现一个横向滚动的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;  

}

效果如图：