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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SceneKit- 画中画效果实现方案

    白的部分是一个plane几何的节点,我们需要将一个SCNScene渲染到这个节点上,来实现画中画效果

    酷走天涯
  • weex-10-组件a的使用

    a标签使用起来比较简单,先留下一个问题,如果想要跳转到html页面怎么实现?我们后面会讲到!

    酷走天涯
  • Swift3.0 - 类簇

    酷走天涯
  • 剖析公司技术栈

    来源:www.cnblogs.com/wangsen/p/9329735.html

    Java团长
  • 【玩转腾讯云】使用云服务器进行生信数据分析

    很多小伙伴手头有生信数据分析,但苦于没有服务器,没法完成自己需要的数据分析,特别是处于学习阶段的同学。这里,向大家推荐一下使用腾讯云CVM服务器,按量计费进行数...

    用户1075469
  • 学界 | UC伯克利AI实验室发干货:用于训练神经网络抓取机器人的Dex-Net 2.0数据集

    AI科技评论按:伯克利AI实验室最新发文公布了用于机器人抓取的Dexterity Network (Dex-Net) 2.0数据集,这些数据集可以用来训练根据实...

    AI科技评论
  • flexbox布局指南

    伸缩容器是display的计算值为flex或inline-flex的元素,其流内孩子就是伸缩项(flex item)

    ayqy贾杰
  • 机器人抓取领域性能评估标准

    机器人抓取涉及检测、分割、姿态估计、抓取点检测、路径规划等任务,本文主要介绍这些任务的评估标准。

    3D视觉工坊
  • 城南新区党工委副书记郭庆生:两千年历史的海滨城市,魅力盐城的大数据发展之路

    数据猿导读 4月24日,《魔方大数据系列应用圆桌论坛之智能工业创新应用论坛》活动在美丽的江苏盐城大数据产业园顺利举行。会上,盐城市城南新区党工委副书记、科教城管...

    数据猿
  • 前端成神之路-移动web开发_flex布局

    container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

    海仔

扫码关注云+社区

领取腾讯云代金券