weex-07-通用布局

本节学习目标

掌握基本的布局方式

致读者

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

<template>
 // 页面有那些元素 写在这里
  // 使用div 标签定义一个父容器
  // class 代表div使用的是哪个样式类
 // 一个样式可以被多个标签元素使用
 <div class="root">
</div> 
</template>

<script>
 // 文件输出一个对象
 export default{
    // 定义和页面相关的数据和方法
 }
</script>

<style>
 .root{
  // div标签样式
 }
</style>

解释一下

1.<template></template> 单词的意思 是模板,这个页面有什么控件或者元素都写在这个
2.<script></script> js相关的代码都写在这里,比如页面上显示的数据,网络请求方法,生命周期函数,单击事件触发的方法
3.<style><style/> 控件\组件张什么样子 多长 多宽 什么颜色 是否有圆角 在视图中什么位置 等等,都在这里写

weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局
一般情况下都是这两种配合使用!

盒子模型弹性定位
我们设置一下root 样式的内容

<style>
  .root { 
  background-color: red; // 设置背景颜色 为红色
  }
  </Style>

网页展示效果

注意一下

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子标签的对齐方式,从开始的位置以此布局

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

<template>
  <div class="root" >
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  </div>
</template>

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

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

  <div class="child1">
  </div>

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

 .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 中所有的组件