flex佈局---標籤切換

昨夜小楼听风雨發表於2024-04-20
Flex

我們需要實現下面的頁面效果

這邊將程式碼放在下面

html部分

<!-- 標籤頁標題 -->
<view class="tob">
  <view class="tab-item">音樂推薦器</view>
  <view class="tab-item">播放器</view>
  <view class="tab-item">播放列表</view>
</view>
<!-- 內容區域 -->
<view class="content">
  <swiper>
    <swiper-item>
    <include src="info.wxml" />
    </swiper-item>
    <swiper-item>
    <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
    <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

css部分

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
.tab{
  display: flex;
}
.tab-item{
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eeeeee;
}
.content{
  flex: 1;
}
.content > swiper{
  height: 100%;
}
.player{
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

　　在上面的css程式碼中，第2行在page中使用了flex佈局；第3行用於設定子元素垂直方向從上到下排列；如果不設定flex-direction: column;時頁面內容會橫向排列

　　第6行page高度設定為100%，並且將content區域設定為flex:1，實現了頁面佔據整個螢幕，tab和player分別固定在螢幕上方和下方，content高度自動拉伸為page高度減去tap和player的高度，從而適應手機螢幕

　　第9行用於將tab區域設為flex佈局，然後透過第12行將子元素設定為flex:1，從而使這3個子元素沿水平方向從左到右排列，並平分每一列的寬度

　　第22行用於設定content區域的swiper元件的高度為100%，從而佔滿整個content區域

相關文章