view组件说明:
    视图容器
    跟HTML代码中的DIV一样，可以包裹其他的组件，也可以被包裹在其他的组件内部。用起来比较自由随意，没有固定的结构。

view组件的用法：

示例项目的wxml代码：

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<view  class="btnGroup">
        <view class="item orange" >退格</view>
        <view class="item orange" >清屏</view>
        <view class="item orange" >+/-</view>
        <view class="item orange" >+</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >9</view>
        <view class="item blue" >8</view>
        <view class="item blue" >7</view>
        <view class="item orange" >-</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >6</view>
        <view class="item blue" >5</view>
        <view class="item blue" >4</view>
        <view class="item orange" >×</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >3</view>
        <view class="item blue" >2</view>
        <view class="item blue" >1</view>
        <view class="item orange" >÷</view>
      </view>
      <view  class="btnGroup">
        <view class="item blue" >0</view>
        <view class="item blue" >.</view>
        <view class="item blue" >历史</view>
        <view class="item orange" >=</view>
      </view>

示例项目的WXSS代码：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
.btnGroup{
    display:flex;
    flex-direction:row;
}
.orange{
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
}
.blue{
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
}

视图样式flex-direction: row的效果图：
 
WXML代码如下

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp">
    <view class="flex-item red" ></view>
    <view class="flex-item green" ></view>
    <view class="flex-item blue" ></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式flex-direction: column的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp column">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
.column{
   flex-direction:column;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式justify-content: flex-start的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
.flex-start{
    flex-direction:row;
    justify-content: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式justify-content: flex-end的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
.flex-end{
    flex-direction:row;
    justify-content: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式justify-content: center的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp justify-content-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
.justify-content-center{
    flex-direction:row;
    justify-content: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式justify-content: space-between的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp space-between">
  <view class="flex-item" style="background: red"></view>
  <view class="flex-item" style="background: green"></view>
  <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
.space-between{
  flex-direction:row;
  justify-content: space-between;
}
.flex-wrp{
  height: 100px;
  display:flex;
  background-color: #FFFFFF;
}
.flex-item{
  width: 100px;
  height: 100px;
}
.red{
  background: red;
}
.green{
  background: green;
}
.blue{
  background: blue;
}

视图样式justify-content: space-around的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp space-around">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
.space-around{
    flex-direction:row;
    justify-content: space-around;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式align-items: flex-end的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp align-items-flex-end">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.align-items-flex-end{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-end;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式align-items: center的效果图：

WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp align-items-center">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.align-items-center{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

视图样式align-items: flex-start的效果图：
 
WXML代码如下：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<view class="flex-wrp align-items-flex-start">
    <view class="flex-item" style="background: red"></view>
    <view class="flex-item" style="background: green"></view>
    <view class="flex-item" style="background: blue"></view>
</view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.align-items-flex-start{
    height: 200px;
    flex-direction:row;
    justify-content: center;
    align-items: flex-start;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}
主要属性：

排列方式（flex-direction），用于wxss

属性
描述
row
横向排列
column
纵向排列

弹性项目内容对齐（justify-content），用于wxss

属性
描述
flex-start
弹性项目向行头紧挨着填充
flex-end
弹性项目向行尾紧挨着填充
center
弹性项目居中紧挨着填充
space-between
弹性项目平均分布在该行上
space-around
弹性项目平均分布在该行上，两边留有一半的间隔空间

项目在容器内侧轴方位的对齐方式（align-items），用于wxss

属性
描述
stretch
默认值，弹性项目被拉伸以适应容器
center
弹性项目位于容器的中心
flex-start
弹性项目位于容器的开头
flex-end
弹性项目位于容器的结尾
baseline
弹性项目位于容器的基线上

点击查看原文

微信小程序组件解读和分析：一、view（视图容器 ）的更多相关文章

  1. 微信小程序组件解读和分析：六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. 微信小程序组件解读和分析：五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  3. 微信小程序组件解读和分析：四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  4. 微信小程序组件解读和分析：三、swiper滑块视图

    swiper滑块组件说明: 滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换   组件的使用示例的运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? ...

  5. 微信小程序组件解读和分析：十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  6. 微信小程序组件解读和分析：十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  7. 微信小程序组件解读和分析：八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  8. 微信小程序组件解读和分析：十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  9. 微信小程序组件解读和分析：十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

随机推荐

  1. POJ3268 Silver Cow Party —— 最短路

    题目链接:http://poj.org/problem?id=3268 Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total ...

  2. idea 设置背景图片

    按下 Ctrl+Shift+A 你会看到一个对话框 在里面输入 Set Background Image 进入设置背景图片窗口 设置背景图,点击确定即可 就一个好看,强大的编程工具了

  3. IntelliJ IDEA 注册码 有效期截止于2018/10/14

    来源: http://idea.lanyus.com/ IntelliJ IDEA 注册码: EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW ...

  4. MYSQL进阶学习笔记六：MySQL视图的创建，理解及管理！（视频序号：进阶_14,15)

    知识点七:MySQL视图的创建(14) 视图的定义: 什么是视图: 视图数由查询结果形成的一张虚拟的表. 什么时候要用到视图? 如果某个查询结果出现的非常频繁,也就是,要经常拿这个查询结果来做子查询. ...

  5. 自定义UITabBarController

    用的时候直接拷贝代码即可. 1.在AppDelegate设置跟控制器为:PQTabBarController #import "PQTabBarController.h" @int ...

  6. JavaScript-Tool：Ext JS

    ylbtech-JavaScript-Tool:Ext JS extjs是一种软件.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染 ...

  7. 关于 .dyib 文件

    .dylib 意味着这是一个动态链接库. libz.dylib 是提供zip压缩.解压缩的库. 库的接口请 #import "zlib.h"

  8. (转)ORA-01245错误 (2013-04-13 18:37:01)

    转自:http://blog.sina.com.cn/s/blog_56359cc90101crx2.html 数据库rman restore database 之后,执行recover databa ...

  9. 折半插入排序 之通俗易懂,图文+代码详解-java编程

    转自http://blog.csdn.net/nzfxx/article/details/51615439 1.特点及概念介绍 下面给大家讲解一下"二分法查找"这个java基础查找 ...

  10. ACM-ICPC 中可能会使用到的库

    sort(v.first(),v.end(),cmp())unique(v.first(),v.end(),cmp()) 第三个参数可以传入一个bool型,用来判断是不是相等,返回unique后的超尾 ...