IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 自学小程序之路(四),利用flex布局来让组件填满剩余空间 -> 正文阅读

[移动开发]自学小程序之路(四),利用flex布局来让组件填满剩余空间

本来说写网络连接和小程序的宿主环境的相关API的。但是感觉好像页面上的很多基础知识还没写完。

然后就想写列表。本来设计时这样的

但我发现我不知道怎么样设置让红色的列表填充剩余页面。

被卡住后,问了问前端的同学,给我提供了利用flex属性来解决的方法。

所以这篇是围绕这个flex来数一下。

小程序中布局的思维

前一篇说小程序的wxml布局是从上至下,行内是从左到右排列。

在Android开发中,看到设计图的构思xml布局的时候,

都是会先把内容分块,每一块锁定在一个layout里,然后再去向这个layout里面放置UI元素。

其实在小程序也是秉承了这种思维。官方称其为Flex布局。

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a

大体意思就是说如果一个组件的display属性定义为了flex,那么就代表这个组件可以作为容器使用。

里面的子元素可以自己设置一些参数来确定自己的对齐方式和占比大小。

类似于Android 开发中,如果一个布局定位为relativelayout那么他的子元素就可以用above,below等属性。

Flex布局

容器组件将display设置为flex后会增加很多属性

flex-direction? ?决定容器中子元素的排列方式(即确定主轴方向)。垂直排列column还是水平排列row

flex-wrap? ? ? ? ??排列的空间放不下时,可以换行wrap还是不可以换行nowrap。默认不换行。

justify-content 子元素相对于父布局的对齐方式,是在父容器左边,右边,还是两端对齐父布局。

align-items? ? ? ?子元素相互之间的对齐方式,是顶部对齐,底部对齐还是中间对齐还是填充对齐

align-content? ? 针对多行布局的属性,设定行对于父布局的对齐方式。

而对应的子元素,如果处于父容器是flex布局的情况下,也有很多属性可以决定自己的位置和大小。

order 决定沿主轴方向上的排列顺序,数值越小,排列越靠前。属性值为整数。

flex-shrink 当子元素在主轴方向溢出时,单个子元素在压缩是的压缩因子,默认为1,因子越大被压缩的越厉害。

flex-grow 当子元素在主轴方向不满时,单个子元素在压缩是的扩张因子,默认为0,因子越大夸张越厉害。

Flex-bias 确定主轴方向的长度。优先级高于width和height。属性为auto时优先级失效。默认auto

Flex flex-grow,flex-shrink,flex-bias的简写,平常使用中最频繁的一个属性。默认为0,1,auto。后两个属性可选。

而我上面的需求中,是用到了flex-grow的属性,即让我的列表组件扩张至占满剩余的空间。

然后我写了一个小demo.虽然组件不是用的列表组件,但是原理是一样的。

<!--flex/flextest.wxml-->
<view class="container">
<!--
  假设页面高度为pHeight
  按钮button默认高度为bHdefault
  文本text默认高度为tHdefault 
  剩余高度为 balanceHeight = pHeight-bHdefault-tHdefault
  每个单位的flex的分配为balnceHeight/(0+1)=perBalance
  分配时 
  button 的属性是flexgrow :0 ,flexshrink: 1,flex-basis: auto
  最终高度
  bHdefault+perBanlance*0 = bHdefault
  text的的属性是flexgrow :1 ,flexshrink: 1,flex-basis: auto
  最终高度
  tHdefault+perBanlance*1 也就是页面剩余高度加上自身高度,所以充满了页面。
-->
  <button style="flex:0 1 auto;width:100%" type="primary">top</button>
  <text style="flex:1 1 auto;width:100%;background-color:red">content</text>
</view>

样式文件

/* flex/flextest.wxss */


/* 这是是必须要设置的,这样才能确定页面的高度为屏幕高度 */
page{
  height: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

看注释!!看注释!!看注释!!

重要的事情说三遍。我的解释都在代码的注释里面了。

最终效果就是我刚开始想实现的

?这个flex和Android中的weight非常相像。

结论:利用flex可以划分flex布局中组件相互的大小占比。

利用flex=0或者1可以满足对项目中要求某个空间填满页面剩余控件的需求

?

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-07-30 12:51:16  更:2021-07-30 12:52:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/25 16:14:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计