利用flex布局横向滚动

wxml代码

<view class="padding-style">
  <view class='overflow-company-second'>
  <view class="special-list">
      <view class='active'>发现简书</view>
      <view>我的关注</view>
      <view>消息评论</view>
      <view>投稿请求</view>
      <view>喜欢和赞</view>
      <view>赞赏和付费</view>
    </view>
  </view>
</view>

 

wxss代码

.padding-style{
padding: 0 28rpx;
}

.overflow-company-second{
overflow: hidden;
height: 88rpx;
border-bottom: 1px solid #ccc;
}

.special-list{
line-height: 88rpx;
font-size: 30rpx;
display: flex;
overflow-x: auto;
justify-content: space-between;
padding-bottom: 40rpx;
}

.special-list>view{
text-align: center;
font-size: 30rpx;
color: #283B42;
font-weight: bold;
flex-basis: 172rpx;
flex-shrink: 0;
white-space: nowrap;
}

.special-list>view.active {
position: relative;
}

.special-list>view.active::before {
content: "";
display: block;
clear: both;
width: 120rpx;
height: 6rpx;
background-image: linear-gradient(90deg, #ea6f5a 58%, #eebeb6 100%);
border-radius: 40rpx;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}

 

主要使用的标签
display: flex flex布局
justify-content: space-between 位于首尾两端的子容器两端对齐
flex-basis: 172rpx 子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸
flex-shrink: 0 收缩比例
white-space: nowrap 规定段落中的文本不进行换行
overflow-x: auto 横向溢出元素的内容区域添加滚动