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

傷城~ 2023-02-20 13:59 28阅读 0赞

### 文章目录 ###

*  小程序开发
 *   *  伸缩布局
     *   *  各个属性介绍
         *  flex基本结构
         *  flex布局平均分配
         *  调整主轴方向
         *  flex布局案例1--固比模型
         *  flex布局案例2--tab标签栏
         *  flex布局案例3--底部播放条
         *  flex布局案例4:---内容区域 自适应高度
         *  flex布局案例5 -- 推荐歌单
         *  flex布局案例6---轮播海报

# 小程序开发 #

## 伸缩布局 ##

### 各个属性介绍 ###

1.  flex- direction调整主轴方向(默认为水平方向)
2.  justify-content调整主轴对齐
3.  aligin-items 调整侧轴对齐（子元素可以使用align-self覆盖）
4.  flex-wrap控制是否换行
5.  aligin-content 堆栈（由flex-wrap产生的独立行）对齐
6.  flex-flow是flex-direction+flex-wrap的简写形式
7.  flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
8.  order控制子项目的排列顺序，正序方式排序，从小到大

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]  
本文主要实现这个页面的布局:

### 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>

效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]

### 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>

效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]

### 调整主轴方向 ###

<!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>

效果如下:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]

### flex布局案例1–固比模型 ###

步骤:

*  1.去掉初始化的无用代码（index文件夹下的js，wxss, wxml）
 *  2.设置index页上的标题头
 *  3.设置固比，固定高度的tabs，和自适应的context
    
    具体代码如下:

在index.json上修改

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

![在这里插入图片描述][20200627232039174.png]  
设置固比

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

效果图:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]

### flex布局案例2–tab标签栏 ###

页面效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]

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

运行结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]

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

下面实现海报和排行榜:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]

.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 – 推荐歌单 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]

--------------------

完

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627231903255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627231923558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200627231938956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020062723200836.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627232039174.png]: https://img-blog.csdnimg.cn/20200627232039174.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627232059864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200627232114514.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200627232204913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200627232223879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200627232240840.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200627232313699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70