微信小程序快速入门个人学习心得（二）

1、使用flex完成music播放器布局

1.1 页头

编写index.json

{
    
    
  "navigationBarTitleText": "Music Player",
  "navigationBarBackgroundColor": "#333",
  "navigationBarTextStyle": "white"
}

在这里插入图片描述
然后对整个播放器进行页面划分，划分为标签栏和内容部分，因此需要两个子容器，一个父容器。
在index.wxml中先添加基本结构：

<view class="root">
  <!-- 标签栏 固定高度 -->
<view class="tabs">
</view>
<!-- 内容 自适应高度 -->
<view class="content">
</view>
</view>

在添加样式。其中page是小程序自带的外层盒子，需要设置宽度内部盒子才能显示出样式。

page{
    
    
  height: 100%;
}
.root{
    
    
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: black;
}
.tabs{
    
    
height: 50px;
background-color: blanchedalmond;
}
.content{
    
    
  flex: 1;
  background-color: cornsilk;
}

在这里插入图片描述
当然，我们应该通过标签栏的内容去控制标签栏高度，因此不用设置成50px。
先把标签栏进行填充。其中**view class=“item active”**这个部分是指这个view标签同时具有item和active元素。

<!-- 标签栏 固定高度 -->
  <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>

在对样式进行修改

page{
    
    
  height: 100%;
}
.root{
    
    
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: black;
}
.tabs{
    
    
  display: flex;
background-color: black;
}
.content{
    
    
  flex: 1;
  background-color: black;
}
.tabs .item{
    
    
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  /* 高度、宽度 */
  padding: 8px 0 ;
}
/* tabs下的item同时还有active属性 */
.tabs .item.active{
    
    
  color: #fff;
  /* 红色下划线 */
  border-bottom: 2px solid #e9232c;
}

在这里插入图片描述
再添加一个容器，作为播放条。

 <!-- 播放条 -->
  <view class="player">
    <view class="poster">
      <image src="../../image/poster.jpg"></image>
    </view>
    <view class="info">
      <text class="title">一生中最爱</text>
      <text class="artist">谭咏麟</text>
    </view>
    <view class="controls">
      <image src="../../image/01.png"></image>
      <image src="../../image/02.png"></image>
      <image src="../../image/03.png"></image>
    </view>
  </view>

编写对应的样式。其中：
.controls image{
width: 40px;
height: 40px;
margin: 5px;
}
指的是这个样式中的image标签样式

.player{
    
    
  display: flex;
  height: 50px;
  background-color: black;
}
.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: #888;
}
.info{
    
    
  flex: 1;
  color: #888;
}
.controls image{
    
    
  width: 40px;
  height: 40px;
  margin: 5px;
}

在这里插入图片描述
然后对内容部分进行元素添加。其中：

这里scroll-view标签是微信小程序所提供的可变化视图（滚动），scroll-y是让它可以纵向滚动

<!-- 内容 自适应高度 -->
  <scroll-view class="content" scroll-y>
    <view class="slide">
      <image src="../../image/slide.png"></image>
    </view>
    <view class="portals">
      <view class="item">
        <image src="../../image/04.png"></image>
        <text>私人FM</text>
      </view>
      <view class="item">
        <image src="../../image/05.png"></image>
        <text>每日歌曲推荐</text>
      </view>
      <view class="item">
        <image src="../../image/06.png"></image>
        <text>云音乐新歌榜</text>
      </view>
    </view>
    <view class="list">
      <view class="title">
        <text>推荐歌单</text>
      </view>
      <view class="inner">
      <view class="item">
        <image src="../../image/poster.jpg"></image>
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../image/poster.jpg"></image>
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../image/poster.jpg"></image>
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../image/poster.jpg"></image>
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../image/poster.jpg"></image>
        <text>一生中最爱的人</text>
      </view>
      <view class="item">
        <image src="../../image/poster.jpg"></image>
        <text>一生中最爱的人</text>
      </view>
    </view>
    </view>
  </scroll-view>

然后编写样式（最终的全部样式）：其中
在这里插入图片描述
这里设置成 overflow: hidden;是让为使用的不显示

page {
    
    
  height: 100%;
}

.root {
    
    
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: black;
}

.tabs {
    
    
  display: flex;
  background-color: black;
}

.content {
    
    
  flex: 1;
  background-color: black;
  color: #ccc;
  overflow: hidden;
}

.tabs .item {
    
    
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  padding: 8px 0;
}

/* tabs下的item同时还有active属性 */
.tabs .item.active {
    
    
  color: #fff;
  border-bottom: 2px solid #e9232c;
}

.player {
    
    
  display: flex;
  height: 50px;
  background-color: black;
}

.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: #888;
}

.info {
    
    
  flex: 1;
  color: #888;
}

.controls image {
    
    
  width: 40px;
  height: 40px;
  margin: 5px;
}

.slide image {
    
    
  width: 100%;
  height: 130px;
}

.portals {
    
    
  display: flex;
}

.portals .item {
    
    
  flex: 1;
  margin-bottom: 15px;
}

.portals .item image {
    
    
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}

.portals .item text {
    
    
  display: block;
  font-size: 12px;
  text-align: center;
}
.list .title{
    
    
    margin: 5px 10px;
    font: 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;
}

在这里插入图片描述
至此，结束，蟹蟹 ~
（我是菜鸟初学者，勿喷~）