⼩程序开发之——⾳乐播放器-编写页⾯结构和样式⼀概述
本节介绍⾳乐⼩程序的基础页⾯结构和样式：html播放音乐代码
项⽬基础页⾯的页⾯结构和样式(标签页、内容区域、底部播放器)
内容区域swiper使⽤include填充内容
⼆效果图
三项⽬基础页⾯的页⾯结构和样式
3.1 页⾯结构(pages/index/index.wxml)
<!--标签页标题-->
<view class="tab">
<view class="tab-item">⾳乐推荐</view>
<view class="tab-item">播放器</view>
<view class="tab-item">播放列表</view>
</view>
<!--内容区域-->
<view class="content">
</view>
<!--底部播放器-->
<view class="player"></view>
说明：
上述代码中， 外层⼀共有3个<view>标签，其class分别为tab、content和player，对应页⾯的3个基本区域3.2 页⾯样式(pages/index/index.wxss)
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 #eee;
}
.content{
flex: 1;
}
.player{
background: #222;
border-top: 1px solid #252525;
height: 112rpx;
}
说明：
page样式：
使⽤了flex布局；
flex-direction: column：设置⼦元素沿垂直⽅向从上到下排列；
content(内容区域)：
flex:1，表⽰页⾯占满整个屏幕，tab和player分别固定在屏幕上⽅和下⽅，cotent的⾼度⾃动拉伸为page⾼度减去tab和player 的⾼度，从⽽适应不同⾼度的⼿机屏幕
tab：
flex:1；设置tab为flex布局
tab-item：
flex: 1;3个⼦元素沿⽔平⽅向从左到右排列，并且平均分布每⼀项的宽度
四内容区域swiper使⽤include填充内容
4.1 内容区域swiper填充(pages/index/index.wxml)
<!--内容区域-->
<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>
4.2 include 代码
info.wxml
<view >
info
</view>
play.wxml
<view >
play
</view>
playlist.wxml
<view >
playlist
</view>
4.3 样式(pages/index/index.wxss)
.content>swiper{
height: 100%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。