利用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 橫向溢出元素的內容區域添加滾動