备案控制台
开发者社区 开发与运维 文章 正文

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

2022-10-08 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序学习笔记(3) -- 伸缩布局

小程序开发


伸缩布局


各个属性介绍


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>


效果:

1dc618a0ed9580ce8bfa6facb208c08f.png


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>


效果如下:


46a9d80a6e05e4e3b19d57a0ee70bcdf.png


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


效果图:


1dc618a0ed9580ce8bfa6facb208c08f.png


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


运行结果：


46a9d80a6e05e4e3b19d57a0ee70bcdf.png


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


下面实现海报和排行榜:


66ba272a0bfc97be54a5fa679e3d5482.png

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


46a9d80a6e05e4e3b19d57a0ee70bcdf.png46a9d80a6e05e4e3b19d57a0ee70bcdf.png

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


完



文章标签：
JavaScript
小程序
关键词：
小程序布局
微信布局
微信小程序布局
微信小程序学习笔记
微信小程序学习笔记伸缩布局
怒放de生命
目录
相关文章
怒放de生命
|
2月前
|
小程序
小程序学习笔记(7) -- 自定义组件案例
小程序学习笔记(7) -- 自定义组件案例
怒放de生命
64 0
怒放de生命
|
2月前
|
小程序 测试技术 API
微信小程序学习笔记(6) -- 本地生活项目
微信小程序学习笔记(6) -- 本地生活项目
怒放de生命
70 0
G佳伟
|
3天前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
G佳伟
8 1
向宇it
|
8天前
|
小程序
微信小程序学习笔记（入门篇）
微信小程序学习笔记（入门篇）
向宇it
7 0
八百标兵奔北坡
|
2月前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
八百标兵奔北坡
31 0
八百标兵奔北坡
|
2月前
|
编解码 小程序 前端开发
在小程序中实现自适应布局或响应式设计
在小程序中实现自适应布局或响应式设计
八百标兵奔北坡
34 0
低代码布道师
|
2月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
低代码布道师
62 0
雪碧有白泡泡
|
2月前
|
JSON 小程序 JavaScript
面试官说，布局小程序页面记得用TDesign组件库
面试官说，布局小程序页面记得用TDesign组件库
雪碧有白泡泡
189 0
怒放de生命
|
2月前
|
小程序 JavaScript
小程序学习笔记(8) -- 小程序生命周期
小程序学习笔记(8) -- 小程序生命周期
怒放de生命
23 0
怒放de生命
|
2月前
|
小程序 JavaScript
微信小程序学习笔记(5) -- todos案例
微信小程序学习笔记(5) -- todos案例
怒放de生命
40 0