微信小程序伸缩布局案例

<!-- Music伸缩布局案例 -->
<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让超出的部分隐藏并有滑动条 scroll-y沿Y轴滑动>-->
  <scroll-view class="content" scroll-y>
  <!-- 轮播图swiper  autoplay自动切换  indicator-dots显示面板指示点-->
    <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>

page {
  height: 100%;
  /* flex布局，root外面还有一个page，若想root高度100%   */
}

.root {
  display: flex;
  flex-direction: column;/*竖着排列*/
  height: 100%;
  background-color: #f0f0f0;
}

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

.tabs .item {
  flex: 1; /* 每个item分为一份 */
  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;
/* 超出的部分隐藏，配合scroll-view 使用 */
}

.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;
  /* text默认是行内元素，没有宽度，所以需要设置display: block;让默认宽度为100% */ 
}

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