<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;
}