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 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——SliderView控件的使用方式

获得和设置标签视图集合,打开集合编辑器,并点击“添加”,分别填写ResourceID属性(菜单项图片名称),Text(菜单项文本),Value(内部值,不在界面...

11710
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

36650
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现快递信息流的效果

设置NodeViewItem背景色的透明度,将该属性设置为“0”,即背景全透明,如图2;

13620
来自专栏smy

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 =========================================...

35260
来自专栏前端知识分享

第4天:JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

10310
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

496100
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

23460
来自专栏练小习的专栏

分享一个跨浏览器固定定位的方法。

我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。 其实很简单,就是我...

216100
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

50750
来自专栏跟着阿笨一起玩NET

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

15410

扫码关注云+社区

领取腾讯云代金券