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 clas
<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>
index.wxcss
/* page根节点-页面里边没有,也得设置 */ 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; }