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

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

2023-12-29 57
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序学习笔记(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生命
|
6月前
|
小程序
小程序学习笔记(7) -- 自定义组件案例
小程序学习笔记(7) -- 自定义组件案例
怒放de生命
83 0
怒放de生命
|
6月前
|
小程序 测试技术 API
微信小程序学习笔记(6) -- 本地生活项目
微信小程序学习笔记(6) -- 本地生活项目
怒放de生命
103 0
yuanzhengme
|
27天前
|
小程序 前端开发 开发者
小程序的页面如何布局？
【10月更文挑战第16天】小程序的页面如何布局？
yuanzhengme
43 1
G佳伟
|
4月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
G佳伟
133 1
向宇it
|
5月前
|
小程序
微信小程序学习笔记（入门篇）
微信小程序学习笔记（入门篇）
向宇it
65 0
八百标兵奔北坡
|
6月前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
八百标兵奔北坡
139 0
八百标兵奔北坡
|
6月前
|
编解码 小程序 前端开发
在小程序中实现自适应布局或响应式设计
在小程序中实现自适应布局或响应式设计
八百标兵奔北坡
207 0
低代码布道师
|
6月前
|
小程序 数据可视化 开发者
微信小程序开发入门介绍-布局组件
微信小程序开发入门介绍-布局组件
低代码布道师
103 0
雪碧有白泡泡
|
6月前
|
JSON 小程序 JavaScript
面试官说，布局小程序页面记得用TDesign组件库
面试官说，布局小程序页面记得用TDesign组件库
雪碧有白泡泡
348 0
怒放de生命
|
6月前
|
小程序 JavaScript
小程序学习笔记(8) -- 小程序生命周期
小程序学习笔记(8) -- 小程序生命周期
怒放de生命
39 0

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 3
    微信小程序 安装依赖 vant
  • 4
    Java微信小程序开发_00_资源帖
  • 5
    微信小程序使用vant组件样式不生效的问题
  • 6
    微信小程序把玩（三十五）Video API
  • 7
    微信小程序（二十一）小程序登录获取openid和unionid
  • 8
    微信小程序把玩（六）模块化
  • 9
    微信小程序-单个插槽
  • 10
    微信小程序云开发|基于微信小程序实现房产中介平台系统（二）
  • 1
    高德地图实现-微信小程序地图导航
    303
  • 2
    微信小程序封装请求
    72
  • 3
    性能工具之JMeter 微信小程序 WebSocket 脚本入门
    216
  • 4
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    133
  • 5
    微信小程序用户登陆和获取用户信息功能实现
    117
  • 6
    uniapp-微信小程序-上拉和下拉触底刷新
    146
  • 7
    外卖小程序实战-接单后小票机自动打印订单
    172
  • 8
    微信小程序和springboot实现微信支付
    218
  • 9
    外卖小程序实战
    52
  • 10
    微信小程序-微信支付
    68

    • 相关课程

    更多
  • IoT小程序框架课程
  • SAE的功能与使用入门

    • 相关电子书

    更多
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 零基础入门Serverless：TodoList应用创建
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    阿里云OSS设置跨域访问