<view class="root"> <!-- 標籤欄的頁籤 固定高度 --> <view class="tabs"> <view class="item active"> <text>個性推薦</text> </view> <view class="item"> <text>歌單</text> </view> <view class="item"> <text>主播電臺</text> </view> <view class="item"> <text>排行榜</text> </view> </view> <!-- 內容區域 自適應高度 --> <scroll-view class="content" scroll-y> <swiper class="slide" autoplay indicator-dots> <swiper-item> <image src="../../images/slide.png"></image> </swiper-item> <swiper-item> <image src="../../images/slide.png"></image> </swiper-item> <swiper-item> <image src="../../images/slide.png"></image> </swiper-item> </swiper> <view class="portals"> <view class="item"> <image src="../../images/04.png"></image> <text>私人FM</text> </view> <view class="item"> <image src="../../images/05.png"></image> <text>每日歌曲推薦</text> </view> <view class="item"> <image src="../../images/06.png"></image> <text>雲音樂新歌榜</text> </view> </view> <view class="list"> <view class="title"> <text>推薦歌單</text> </view> <view class="inner"> <view class="item"> <image src="../../images/poster.jpg"></image> <text>一輩子中最愛的是誰誰?</text> </view> <view class="item"> <image src="../../images/poster.jpg"></image> <text>一輩子中最愛的是誰誰?</text> </view> <view class="item"> <image src="../../images/poster.jpg"></image> <text>一輩子中最愛的是誰誰?</text> </view> <view class="item"> <image src="../../images/poster.jpg"></image> <text>一輩子中最愛的是誰誰?</text> </view> <view class="item"> <image src="../../images/poster.jpg"></image> <text>一輩子中最愛的是誰誰?</text> </view> <view class="item"> <image src="../../images/poster.jpg"></image> <text>一輩子中最愛的是誰誰?</text> </view> </view> </view> </scroll-view> <!-- 播放控制條條 固定高度 --> <view class="player"> <view class="poster"> <image src="../../images/poster.jpg"></image> </view> <view class="info"> <text class="title">一輩子中最愛</text> <text class="artist">譚詠麟</text> </view> <view class="controls"> <image src="../../images/01.png"></image> <image src="../../images/02.png"></image> <image src="../../images/03.png"></image> </view> </view> </view>
page { height: 100%; } .root { display: flex; flex-direction: column; height: 100%; background-color: #f0f0f0; } .tabs { display: flex; background-color: pink; } .tabs .item { flex: 1; text-align: center; font-size: 12px; background-color: #222; color: #ccc; padding: 8px 0; } .tabs .item.active { color: #fff; border-bottom: 2px solid #e9232c; } .content { flex: 1; background-color: #111214; color: #ccc; overflow: hidden; } .slide image { width: 100%; height: 130px; } .portals { display: flex; margin-bottom: 15px; } .portals .item { flex: 1; } .portals .item image { width: 60px; height: 60px; display: block; margin: 10px auto; } .portals .item text { display: block; font-size: 12px; text-align: center; } .list .title { margin: 5px 10px; font-size: 14px; } .list .inner { display: flex; flex-wrap: wrap; } .list .inner .item { width: 33.33333333%; } .list .inner .item image { display: block; width: 120px; height: 120px; margin: 0 auto; } .list .inner .item text { font-size: 14px; } .player { display: flex; height: 50px; background-color: #17181A; } .poster image { width: 40px; height: 40px; margin: 5px; } .info { flex: 1; color: #888; font-size: 14px; margin: 5px; } .info .title{ display: block; font-size: 16px; color: #ccc; } .controls image { width: 40px; height: 40px; margin: 5px 2px; }
能夠改一下頁面的固定樣式部分css
{ "navigationBarTitleText": "Music Player", "navigationBarBackgroundColor": "#333", "navigationBarTextStyle": "white" }
```html