默認(rèn)小于4條信息左右兩端對(duì)齊 超出添加滾動(dòng)
以下是圖例：
兩端對(duì)齊.png
左右滾動(dòng).png
wxml代碼
<view class="padding-style">
<view class='overflow-company-second'>
<view class="special-list">
<view class='active'>發(fā)現(xiàn)簡(jiǎn)書</view>
<view>我的關(guān)注</view>
<view>消息評(píng)論</view>
<view>投稿請(qǐng)求</view>
<view>喜歡和贊</view>
<view>贊賞和付費(fèi)</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%);
}
主要使用的標(biāo)簽
-
display: flexflex布局 -
justify-content: space-between位于首尾兩端的子容器兩端對(duì)齊 -
flex-basis: 172rpx子容器基準(zhǔn)大小 表示在不伸縮的情況下子容器的原始尺寸 -
flex-shrink: 0收縮比例 -
white-space: nowrap規(guī)定段落中的文本不進(jìn)行換行 -
overflow-x: auto橫向溢出元素的內(nèi)容區(qū)域添加滾動(dòng)
