微信小程序开发之——音乐播放器-编写页面结构和样式

一 概述

本节介绍音乐小程序的基础页面结构和样式：

• 项目基础页面的页面结构和样式(标签页、内容区域、底部播放器)
• 内容区域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 style="background:#ccc;color:#000;height:100%">
info
</view>

play.wxml

<view style="background:#ddd;color:#000;height:100%">
play
</view>

playlist.wxml

<view style="background:#fff;color:#000;height:100%">
playlist
</view>

4.3 样式(pages/index/index.wxss)

.content>swiper{
  height: 100%;
}