开始
案例效果
案例需求
- 使用flex弹性布局
- 有滚动条
页面结构
wxml
<!-- index.wxml -->
<view class="container">
<!-- 标签栏的页签 固定高度 -->
<view class="top">
<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>
<view class="slide">
<image src="../../images/slide.png" />
</view>
<view class="portals">
<view class="item">
<image src="../../images/04.png" />
<text>私人FM</text>
</view>
<view class="item">
<image src="../../images/05.png" />
<text>每日歌曲推荐</text>
</view>
<view class="item">
<image src="../../images/06.png" />
<text>云音乐新歌榜</text>
</view>
</view>
<view class="list">
<text class="title">推荐歌单</text>
<view class="inner">
<view class="item">
<image src="../../images/poster.jpg" />
<text>一生中最爱的人是谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg" />
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../images/poster.jpg" />
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../images/poster.jpg" />
<text>一生中最爱的人</text>
</view>
<view class="item">
<image src="../../images/poster.jpg" />
<text>一生中最爱的人是谁?</text>
</view>
<view class="item">
<image src="../../images/poster.jpg" />
<text>一生中最爱的人</text>
</view>
</view>
</view>
</scroll-view>
<!-- 播放控制条 固定高度 -->
<view class="bottom">
<view class="poster">
<image src="../../images/poster.jpg"></image>
</view>
<view class="info">
<text class="title">一生中最爱</text>
<text>谭咏麟</text>
</view>
<view class="controls">
<image src="../../images/01.png" />
<image src="../../images/02.png" />
<image src="../../images/03.png" />
</view>
</view>
</view>
wxss
/**index.wxss**/
page {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
/* align-items: center; */
/* justify-content: space-between; */
/* box-sizing: border-box; */
}
.top {
background-color: rgb(10, 10, 10);
display: flex;
color: white;
font-size: 14px;
}
.top .item {
padding: 5px 0;
flex: 1;
text-align: center;
}
.top .item.active {
color: #ccc;
border-bottom: 1px solid salmon;
}
.content {
flex: 1;
background-color: #111214;
color: #ccc;
/* 微信小程序不支持这么做有插件 */
overflow: hidden;
/* overflow: scroll; */
}
.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 {
font-size: 12px;
display: block;
text-align: center;
}
.list .title {
margin: 5px 10px;
font-size: 14px;
}
.list .inner {
display: flex;
flex-wrap: wrap;
}
.list .inner .item{
width: 33.3333%;
}
.inner .item image {
display: block;
width: 120px;
height: 120px;
margin: 0 auto;
}
.inner .item text {
font-size: 14px;
}
.bottom {
display: flex;
height: 50px;
background-color: #17181a;
}
.bottom .poster image {
width: 40px;
height: 40px;
margin: 5px;
}
.info {
flex: 1;
color: #888;
font-size: 14px;
}
.info .title {
display: block;
font-size: 16px;
color: #ccc;
}
.controls image {
width: 40px;
height: 40px;
margin: 5px 2px;
}
总结
- flex使用:给父元素display:flex;flex-direction:row; 表示主轴侧轴方向
1. flex-wrap:wrap; 表示多余的下一行(换行) ,如果一行要三个设置宽度为33.33333%
2. flex:1; 除去固定宽度,其余的变成自适应
3. scroll-view 滚动条标签
4. flex-direction 属性:通过设置坐标轴,来设置项目排列方向。
5. justify-content 属性:设置项目在主轴方向上对齐方式,以及分配项目之间及其周围多余的空间。
6. align-items 属性:设置项目在行中的对齐方式。
7. align-content 属性:多行排列时,设置行在交叉轴方向上的对齐方式,以及分配行之间及其周围多余的空间。