解读和分析微信小程序官方组件：一、view（视图容器）

百变鹏仔 1个月前 (03-13) #前端问答

文章标签视图

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

view组件的用法：
示例项目的wxml代码：

[XML] 纯文本查看 复制代码

    <view>            <view>退格</view>            <view>清屏</view>            <view>+/-</view>            <view>+</view>          </view>          <view>            <view>9</view>            <view>8</view>            <view>7</view>            <view>-</view>          </view>          <view>            <view>6</view>            <view>5</view>            <view>4</view>            <view>×</view>          </view>          <view>            <view>3</view>            <view>2</view>            <view>1</view>            <view>÷</view>          </view>          <view>            <view>0</view>            <view>.</view>            <view>历史</view>            <view>=</view>          </view>

示例项目的WXSS代码：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>        <view></view>        <view></view>        <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>        <view></view>        <view></view>        <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>        <view></view>        <view></view>        <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>        <view></view>        <view></view>        <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>        <view></view>        <view></view>        <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>      <view></view>      <view></view>      <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

    <view>        <view></view>        <view></view>        <view></view>    </view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

    .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] 纯文本查看 复制代码

<view>    <view></view>    <view></view>    <view></view></view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

.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] 纯文本查看 复制代码

<view>    <view></view>    <view></view>    <view></view></view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

.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] 纯文本查看 复制代码

<view>    <view></view>    <view></view>    <view></view></view>

WXSS代码如下：

[CSS] 纯文本查看 复制代码

.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（视图容器 ）

微信三级分销系统产品详情页怎么开发?

微信公众号-获取用户信息（网页授权获取）实现步骤

php微信公众号开发（2）百度BAE搭建和数据库使用

php微信公众号开发（3）php实现简单微信文本通讯

php微信公众号开发（4）php实现自定义关键字回复

解读和分析微信小程序官方组件：一、view（视图容器）