微信小程序界面布局
  HvTJUzsxOBtS 2023年11月22日 21 0


1.组件横向排列

父组件设置属性:

  display: flex;       //弹性布局

  flex-direction: row;  //布局方向 横向

父组件设置 

微信小程序界面布局_系统

 

微信小程序界面布局_系统_02

 

微信小程序界面布局_系统_03

 
2.组件纵向排列

父组件设置属性:

  display: flex;       //弹性布局

  flex-direction: row;  //布局方向 纵向

微信小程序界面布局_系统_04

 

3.组件重叠排列

子组件都使用 z-index 和 position 配合

z-index 越小越在下面

position 属性 可以采用 fixed 或者 absolute 来固定位置

微信小程序界面布局_系统_05

 

微信小程序界面布局_系统_06

 

微信小程序界面布局_系统_07

 

4、组件居左、居中 、居右

<view class="test">

<view class="viewone">one</view>

<view class="viewtwo">two</view>

<view class="viewthree">three</view>

</view>

父组件:

.test{

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: row;

}

1.居左

子组件 设置 :

 position: fixed;

 left: 0;

微信小程序界面布局_系统_08

 

2. 居右

子组件 设置:

 position: fixed;

 right: 0;

 

微信小程序界面布局_系统_09

 

3.居下

子组件 设置:

 position: fixed;

 bottom: 0;

微信小程序界面布局_系统_10

 

4、居中:

1)子组件 左右居中:

子组件设置

 position: fixed;

  left: 0;

  right: 0;

  margin: auto;

微信小程序界面布局_系统_11

 

2)子组件 上下居中:

子组件设置 

  position: fixed;

  top: 0;

  bottom: 0;

  margin: auto;

微信小程序界面布局_系统_12

 

3)、子组件上下左右居中

子组件设置

微信小程序界面布局_系统_13

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月22日 0

暂无评论

推荐阅读
  qE5RhQde1zxj   2023年12月12日   65   0   0 系统系统
  qE5RhQde1zxj   2023年12月12日   103   0   0 系统系统
  T2OqV3qDOzaQ   2023年12月12日   75   0   0 系统系统
  UPDXd5cjON6v   2023年12月12日   47   0   0 系统系统
  CiIZfyyIq65u   2023年11月30日   40   0   0 系统系统
  Qw9CIfGfUZoX   2023年12月02日   36   0   0 系统系统
HvTJUzsxOBtS