首頁 > 文章 > 微信小程式 > 解讀與分析微信小程式官方元件：一、view（視圖容器）

解讀與分析微信小程式官方元件：一、view（視圖容器）

巴扎黑原創: 2017-03-19 18:20:251564瀏覽

view元件說明:
視圖容器
跟HTML程式碼中的p一樣，可以包覆其他的元件，也可以包裹在其他的元件內部。用起來比較自由隨意，沒有固定的結構。

view元件的用法：
範例專案的wxml程式碼：

[XML] 純文字檢視 複製程式碼

    <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] 純文字檢視 複製程式碼

    .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 class="flex-wrp">
        <view class="flex-item red" ></view>
        <view class="flex-item green" ></view>
        <view class="flex-item blue" ></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 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]

純文字檢視複製程式碼

    .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 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]

純文字檢視

複製程式碼

    .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 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]
純文字檢視

複製程式碼

    .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 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]

純文字檢視

複製程式碼

    .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 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]

純文字檢視

複製程式碼

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

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

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

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

.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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解微信小程式前端源碼與實例分析下一篇：詳解微信小程式前端源碼與實例分析

看更多

解讀與分析微信小程式官方元件：一、view（視圖容器 ）

相關文章

解讀與分析微信小程式官方元件：一、view（視圖容器）