前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >weex-07-通用布局

weex-07-通用布局

作者头像
酷走天涯
发布2018-09-14 15:13:54
6860
发布2018-09-14 15:13:54
举报
文章被收录于专栏:每日一篇技术文章
本节学习目标

掌握基本的布局方式

致读者

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

代码语言:javascript
复制
<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 样式的内容

代码语言:javascript
复制
<style>
  .root { 
  background-color: red; // 设置背景颜色 为红色
  }
  </Style>

网页展示效果

注意一下

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

我们修改样式如下

代码语言:javascript
复制
.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子标签的对齐方式,从开始的位置以此布局

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

代码语言:javascript
复制
<template>
  <div class="root" >
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  </div>
</template>

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

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

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

代码语言:javascript
复制
justify-content: center;

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

我们让子标签在屏幕居中

代码语言:javascript
复制
.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

代码语言:javascript
复制
  <div class="child1">
  </div>

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

代码语言:javascript
复制
 .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 中所有的组件

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.06.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本节学习目标
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档