weex-07-通用布局

本节学习目标

掌握基本的布局方式

致读者

之后的文章 你可能会看到 标签 视图 控件这样的字眼 代表的都是一个意思 因为在网页中我们叫标签 在原生应用中我们称之为视图或控件
先来看一下我们vue文件的结构

解释一下

1. 单词的意思 是模板,这个页面有什么控件或者元素都写在这个
2. js相关的代码都写在这里,比如页面上显示的数据,网络请求方法,生命周期函数,单击事件触发的方法
3.

网页展示效果

注意一下

1.设置背景颜色的时候不能使用 background:red 这种写法 因为手机端渲染暂时不支持,设置控件颜色务必使用background-color:red 这种形式

我们修改样式如下

.root { 
   display: flex;
   flex-direction: column;
align-items: center;
background-color: red;
   justify-content: flex-start;
}

此时刷新网页 是没有任何变化的,来解释一下

display:flex 设置root 标签的子标签的布局方式为flex 弹性布局
flex-direction:column 子标签排列的方式为垂直排列
align-items: center; 子标签沿着y轴居中对齐
justify-content:flex-start子标签的对齐方式,从开始的位置以此布局

接下来我们定义几个子标签看一下效果

此时刷新页面时没有任何效果的,因为我们的样式还没有设置,接下来我们设置子标签的样式

7F7E09D8-D697-459E-8016-6533D99A2AF2.png

我们修改子变迁的对齐方式为居中对齐

justify-content: center;

4CCA9C1F-901C-4DE3-810A-1D03EFFFEA6F.png

我们让子标签在屏幕居中

.root { 
    display: flex;
    flex-direction: column;
align-items: center;
background-color: red;
justify-content: center;
  }

0330F481-BD42-4769-A3F6-CF59333407E4.png

弹性布局暂时就讲到这里,后面我们在将组件的时候在详细讲解,这样记忆比较深刻,也不枯燥!

接下来演示一下定位的使用

C7D521E8-129F-4CA3-AAB5-2676AD065753.png

看一下上面这个布局怎么做,你如果会做的话可以直接跳过,进入下一节

我们修改第一个标签的布局类为child1

接下来,我们修改如下样式

 .child1{
     position:absolute;
     left:10px;
   top: 20px;
   width:100px;
   height: 50px;
   background-color:green;
 }

解释一下

position:absolute; 必须要设置的,设置这个标签使用绝对定位方式,不受父标签弹性布局的约束
left:10px;左边距离父视图10像素
top:20px;上边距离父视图20像素
width:100px;控件宽度为100px
height:50px;控件高度为50px;

布局的内容暂时讲解到这里,接下来我们讲解weex 中所有的组件