本节学习目标
掌握基本的布局方式
致读者
之后的文章 你可能会看到 标签 视图 控件这样的字眼 代表的都是一个意思 因为在网页中我们叫标签 在原生应用中我们称之为视图或控件
先来看一下我们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>
此时刷新页面时没有任何效果的,因为我们的样式还没有设置,接下来我们设置子标签的样式
我们修改子变迁的对齐方式为居中对齐
justify-content: center;
我们让子标签在屏幕居中
.root {
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
justify-content: center;
}
弹性布局暂时就讲到这里,后面我们在将组件的时候在详细讲解,这样记忆比较深刻,也不枯燥!
接下来演示一下定位的使用
看一下上面这个布局怎么做,你如果会做的话可以直接跳过,进入下一节
我们修改第一个标签的布局类为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 中所有的组件
