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

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

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


小程序开发

伸缩布局

各个属性介绍

  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控制子项目的排列顺序，正序方式排序，从小到大

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

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

完

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

热门文章

最新文章

  • 1
    【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？
  • 2
    【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？
  • 3
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
  • 4
    校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元？是的，就是只需要4800元
  • 5
    【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？
  • 6
    【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
  • 7
    为什么不加盟线下陪玩APP小程序平台，而是自建平台？
  • 8
    【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数01
  • 9
    【一步步开发AI运动小程序】十、姿态动作相似度比较
  • 10
    uni-app开发AI康复锻炼小程序，帮助肢体受伤患者康复！
  • 1
    POINTS 1.5：腾讯微信开源的多模态大模型，超越了业界其他的开源视觉语言模型，具备强大的视觉和语言处理能力
    135
  • 2
    微信native支付对接案例详解
    26
  • 3
    即时通讯技术文集（第45期）：微信、QQ技术精华合集(Part2) [共14篇]
    32
  • 4
    通过标签清理微信好友：Python自动化脚本解析
    34
  • 5
    手撸了一个全自动微信清粉小工具（源码详解）
    70
  • 6
    即时通讯技术文集（第44期）：微信、QQ技术精华合集(Part1) [共14篇]
    24
  • 7
    如何在公众号里制作微信报名表
    59
  • 8
    仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
    60
  • 9
    微信小程序地图定位的核心技术与实际应用详解
    121
  • 10
    微信开发者工具里面没有企业微信模式
    46

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    DataWorks售前咨询