小程序开发

伸缩布局

各个属性介绍

flex- direction调整主轴方向(默认为水平方向)

justify-content调整主轴对齐

aligin-items 调整侧轴对齐（子元素可以使用align-self覆盖）

flex-wrap控制是否换行

aligin-content 堆栈（由flex-wrap产生的独立行）对齐

flex-flow是flex-direction+flex-wrap的简写形式

flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

order控制子项目的排列顺序，正序方式排序，从小到大

本文主要实现这个页面的布局:

flex基本结构

flex：1：左侧宽度固定，右侧自动填充的写法:

代码演示:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<style type="text/css">
  /*
      1.设计好DOM结构
      2：将父盒子设置为伸缩盒子
  */
  html,body{
  height: 100%;
  }
  .root{
  /*将付和子设置为伸缩盒子*/
  display: flex;
  border: 2px solid #ccc;
  height: 100%;
  }
  .sidebar{
  width: 200px;
  background-color: #ff0;
  }
  .content{
      /*  width: 300px;*/ 
  flex: 1;
  background-color: #e0e0e0;
  }
</style>
<body>
  <div class="root">
  <div class="sidebar"></div>
  <div class="content"></div>
  </div>
</body>
</html>

效果:

flex布局平均分配

还是利用flex：1.

代码演示:

<!DOCTYPE html>
<html>
<head>
  <title>flex demo 2</title>
</head>
<style type="text/css"> 
  .container{
  display: flex;
  width: 400px;
  height: 300px;
  border: 1px solid #CCC;
  }
  .container .item{
  flex:1;
  }
  .item:first-child{
    flex: inherit;
  }
  /*总的份数是4份，每一份占一份*/
</style>
<body>
   <div class="container">
      <div class="item" style="background-color: #ff0;width: 200px;">1</div>
      <div class="item" style="background-color: #f00">2</div>
      <div class="item" style="background-color: #f0f">3</div>
      <div class="item" style="background-color: #0ff">4</div>
      <div class="item" style="background-color: #ffe">5</div>
   </div>
</body>
</html>

效果:

网络异常，图片无法展示

调整主轴方向

<!DOCTYPE html>
<html>
<head>
  <title>flex demo 2</title>
</head>
<style type="text/css"> 
  .container{
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  border: 1px solid #CCC;
  }
  .container .item{
  flex:1;
  }
  .item:first-child{
    flex: inherit;
  }
  /*总的份数是4份，每一份占一份*/
</style>
<body>
   <div class="container">
      <div class="item" style="background-color: #ff0;width: 200px;">1</div>
      <div class="item" style="background-color: #f00">2</div>
      <div class="item" style="background-color: #f0f">3</div>
      <div class="item" style="background-color: #0ff">4</div>
      <div class="item" style="background-color: #ffe">5</div>
   </div>
</body>
</html>

效果如下:

flex布局案例1–固比模型

步骤:

1.去掉初始化的无用代码（index文件夹下的js，wxss, wxml）

2.设置index页上的标题头

3.设置固比，固定高度的tabs，和自适应的context

具体代码如下:

在index.json上修改

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

设置固比

<!--index.wxml-->
<view class="root">
    <!-- 标签栏的页签 固定高度-->
    <view class="tabs"></view>
    <!-- 内容区域 自适应高度 -->
    <view class="content"></view>
</view>

/**index.wxss**/
page{
  height: 100%;
}
.root{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f0f0;
}
.tabs{
  height: 50px;
  background-color: pink;
}
.content{
  flex:1;
  background-color: yellow;
}

效果图:

flex布局案例2–tab标签栏

<!--index.wxml-->
<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>
    <!-- 内容区域 自适应高度 -->
    <view class="content"></view>
</view>

/**index.wxss**/
page{
  height: 100%;
}
.root{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f0f0;
}
.tabs{
  /* height: 50px; */
  display: flex;
  background-color: pink;
}
.tabs .item{
  flex: 1;
  text-align: center;
  font-size: 12px;
  background-color: #222;
  color: #fff;
  padding: 5px 0;
}
.tabs .item.active{
  color: #fff;
  border-bottom: 2px solid #e9232c;
}
.content{
  flex:1;
  background-color: yellow;
}

页面效果:

flex布局案例3–底部播放条

<!--index.wxml-->
<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>
    <!-- 内容区域 自适应高度 -->
    <view class="content"></view>
    <!-- 播放控制条 固定高度 -->
     <view class="player">
      <view class="poster"> 
        <image src="../../images/1.png"></image>
      </view>
      <view class="info"> 
        <text class="title">一生中最爱</text>
        <text class="artist">谭咏麟</text>
      </view>
      <view class="controls"> 
         <image src="../../images/11.png"></image>
         <image src="../../images/22.png"></image>
         <image src="../../images/33.png"></image>
      </view>
     </view>
</view>

/**index.wxss**/
page{
  height: 100%;
}
.root{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f0f0;
}
.tabs{
  /* height: 50px; */
  display: flex;
  background-color: pink;
}
.tabs .item{
  flex: 1;
  text-align: center;
  font-size: 12px;
  background-color: #222;
  color: #fff;
  padding: 5px 0;
}
.tabs .item.active{
  color: #fff;
  border-bottom: 2px solid #e9232c;
}
.content{
  flex:1;
  background-color: yellow;
}
.player{
  height: 50px;
  background-color: #000;
}
.player{
  display: flex;
}
.poster image{
  width: 40px;
  height: 40px;
  margin: 5px;
}
.info {
  color: #888;
  flex: 1;  
  font-size: 14px;
  margin: 5px;
}
.info .title{
  display: block;
  font-size: 16px;
  color: #ccc;
}
.info .artist{
}
.controls image{
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}

运行结果：

flex布局案例4:—内容区域自适应高度

下面实现海报和排行榜:

<!--index.wxml-->
<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>
    <!-- 内容区域 自适应高度 -->
    <view class="content">
    <!-- 录播图 -->
      <view class="slider">
         <image src="../../images/slide.png"></image>
      </view>
      <!-- 统计 -->
       <view class="portals">
         <view class="item">
           <image src="../../images/10.png"></image>
           <text>私人FM</text>
         </view>
          <view class="item">
           <image src="../../images/12.png"></image>
           <text>每日歌曲推荐</text>
         </view>
          <view class="item">
           <image src="../../images/13.png"></image>
           <text>云音乐新歌榜</text>
         </view>       
       </view>
      <!-- 推荐 -->
      <view class="list">
         <view class="title"></view>
      </view>
    </view>
    <!-- 播放控制条 固定高度 -->
     <view class="player">
      <view class="poster"> 
        <image src="../../images/1.png"></image>
      </view>
      <view class="info"> 
        <text class="title">一生中最爱</text>
        <text class="artist">谭咏麟</text>
      </view>
      <view class="controls"> 
         <image src="../../images/11.png"></image>
         <image src="../../images/22.png"></image>
         <image src="../../images/33.png"></image>
      </view>
     </view>
</view>

content{
  flex:1;
  background-color: #000;
  color: #ccc;
}
.content .slider image{
  width: 100%;
  height: 130px;
}
.content .portals{
  display: flex;
}
 .portals  .item{
  flex: 1;
 }
.portals  .item image{
  display: block;
  width: 60px;
  height: 60px;
  margin: 10px auto;  
}
.portals  .item text{
  display: block;
  font-size: 12px;
  text-align: center;
}

flex布局案例5 – 推荐歌单

<!--index.wxml-->
<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 class="content" scroll-y>
    <!-- 录播图 -->
      <view class="slider">
         <image src="../../images/slide.png"></image>
      </view>
      <!-- 统计 -->
       <view class="portals">
         <view class="item">
           <image src="../../images/10.png"></image>
           <text>私人FM</text>
         </view>
          <view class="item">
           <image src="../../images/12.png"></image>
           <text>每日歌曲推荐</text>
         </view>
          <view class="item">
           <image src="../../images/13.png"></image>
           <text>云音乐新歌榜</text>
         </view>       
       </view>
      <!-- 推荐歌单-->
      <view class="list">
         <view class="title">
            <text>推荐歌单</text>
         </view>
         <view class="inner">
            <view class="item">
               <image src="../../images/8.png"></image>
               <text>一生中最爱的是谁谁?</text>
            </view>
            <view class="item">
               <image src="../../images/8.png"></image>
               <text>一生中最爱的是谁谁?</text>
            </view>
            <view class="item">
               <image src="../../images/8.png"></image>
               <text>一生中最爱的是谁谁?</text>
            </view>
            <view class="item">
               <image src="../../images/8.png"></image>
               <text>一生中最爱的是谁谁?</text>
            </view>
            <view class="item">
               <image src="../../images/8.png"></image>
               <text>一生中最爱的是谁谁?</text>
            </view>
            <view class="item">
               <image src="../../images/8.png"></image>
               <text>一生中最爱的是谁谁?</text>
            </view>
         </view>
      </view>
   </scroll-view>
    <!-- 播放控制条 固定高度 -->
     <view class="player">
      <view class="poster"> 
        <image src="../../images/1.png"></image>
      </view>
      <view class="info"> 
        <text class="title">一生中最爱</text>
        <text class="artist">谭咏麟</text>
      </view>
      <view class="controls"> 
         <image src="../../images/11.png"></image>
         <image src="../../images/22.png"></image>
         <image src="../../images/33.png"></image>
      </view>
     </view>
</view>

/**index.wxss**/
page{
  height: 100%;
}
.root{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f0f0;
}
.tabs{
  /* height: 50px; */
  display: flex;
  background-color: pink;
}
.tabs .item{
  flex: 1;
  text-align: center;
  font-size: 12px;
  background-color: #222;
  color: #fff;
  padding: 5px 0;
}
.tabs .item.active{
  color: #fff;
  border-bottom: 2px solid #e9232c;
}
.content{
  flex:1;
  background-color: #000;
  color: #ccc;
  overflow: scroll;
}
.content .slider image{
  width: 100%;
  height: 130px;
}
.content .portals{
  display: flex;
  margin-bottom: 16px;
}
 .portals  .item{
  flex: 1;
 }
.portals  .item image{
  display: block;
  width: 60px;
  height: 60px;
  margin: 10px auto;  
}
.portals  .item text{
  display: block;
  font-size: 12px;
  text-align: center;
}
.list .title{
  margin: 5px 10px;
  font-size: 14px;
}
.list .inner{
  display: flex;
  flex-wrap: wrap;
}
.list .inner .item{
  width: 33.333333%;
}
.list .inner .item image{
  display: block;
  height: 120px;
  width: 120px;
  margin:0 auto;
}
.list .inner .item text{
  font-size: 12px;
}
.player{
  height: 50px;
  background-color: #000;
}
.player{
  display: flex;
}
.poster image{
  width: 40px;
  height: 40px;
  margin: 5px;
}
.info {
  color: #888;
  flex: 1;  
  font-size: 12px;
  margin: 5px;
}
.info .title{
  display: block;
  font-size: 16px;
  color: #ccc;
}
.info .artist{
}
.controls image{
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}

flex布局案例6—轮播海报

<!-- 内容区域 自适应高度 -->
    <scroll-view class="content" scroll-y>
    <!-- 录播图 -->
      <swiper class="slider" autoplay>
         <block>
            <swiper-item>
               <image src="../../images/slide.png"></image>
            </swiper-item>
            <swiper-item>
               <image src="../../images/slide.png"></image>
            </swiper-item>
         </block>
      </swiper>   
        ...

完

微信小程序学习笔记(3) -- 伸缩布局

小程序开发

伸缩布局

各个属性介绍

flex基本结构

flex布局平均分配

调整主轴方向

flex布局案例1–固比模型

flex布局案例2–tab标签栏

flex布局案例3–底部播放条

flex布局案例4:—内容区域自适应高度

flex布局案例5 – 推荐歌单

flex布局案例6—轮播海报

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序学习笔记(3) -- 伸缩布局

小程序开发

伸缩布局

各个属性介绍

flex基本结构

flex布局平均分配

调整主轴方向

flex布局案例1–固比模型

flex布局案例2–tab标签栏

flex布局案例3–底部播放条

flex布局案例4:—内容区域 自适应高度

flex布局案例5 – 推荐歌单

flex布局案例6—轮播海报

热门文章

最新文章

相关课程

相关电子书

相关实验场景

flex布局案例4:—内容区域自适应高度