简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > 微信小程式 > 小程式開發 > 主體

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

高洛峰
發布： 2017-03-16 14:09:03
原創
5532 人瀏覽過

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

view元件的用法：

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

範例專案的wxml程式碼：

<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程式碼：

.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的效果圖：

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

WXML程式碼如下

<view class="flex-wrp">
    <view class="flex-item red" ></view>
    <view class="flex-item green" ></view>
    <view class="flex-item blue" ></view>
</view>
登入後複製

WXSS程式碼如下：

.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的效果圖：

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

WXML程式碼如下：

<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程式碼如下：

.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的效果圖：

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

WXML程式碼如下： 

<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程式碼如下：

.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的效果圖：

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

WXML程式碼如下：

<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程式碼如下：

.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的效果圖：

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

## WXML程式碼如下：

<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程式碼如下：

.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的效果圖：微信小程序：view（视图容器 ）组件解读和分析

'

WXML程式碼如下：

<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程式碼如下：

.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的效果圖：微信小程序：view（视图容器 ）组件解读和分析

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

# #WXML程式碼如下：

<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程式碼如下：

.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的效果圖：微信小程序：view（视图容器 ）组件解读和分析

WXML程式碼如下：

<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程式碼如下：

.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的效果圖：微信小程序：view（视图容器 ）组件解读和分析

WXML程式碼如下：

<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程式碼如下：

.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程式碼如下：###
<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程式碼如下：###
.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###

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

彈性項目內容對齊（justify-content），用於wxss

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

項目在容器內側軸方位的對齊方式（ align-items），用於wxss

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

#

以上是微信小程式：view（視圖容器 ）元件解讀與分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
微信小程式
來源：php.cn
上一篇：微信小程式開發使用loading元件顯示載入動畫方法 下一篇：詳解python自訂模組、套件
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在網路應用程式中顯示版本資訊的最佳實踐是什麼？ 我正在開發一個網頁應用程式。在網路應用程式中顯示版本資訊的最佳實踐是什麼？我正在使用語義版本控制，並且我已經有了semver，例如1.2.0但我很好奇在哪裡顯示它的最佳方式以及如何...
來自於 2024-04-06 19:13:16
0
2
476
npx create-react-app 指令出現錯誤，我該如何解決？ 我一直在嘗試使用'npxcreate-react-app'命令創建一個新的React應用，但似乎對我來說無效。最近有其他人遇到這個問題嗎？我有一個穩定的互聯網連接，並確保我的系統上...
來自於 2024-04-05 14:42:18
0
1
3511
如何使用 CSS 刪除 Next.js 中井字遊戲板上每行下方的空格？ 為什麼每一行下面都有一個空格？ （CSS）我正在嘗試製作一個Next.js井字遊戲應用程式來測試我的技能。但是，我遇到了css問題。似乎每行板下方都存在填充問題-每行下方都有一個小...
來自於 2024-04-05 11:39:02
0
1
1431
如何透過 DOM 而不是透過表格來呈現數據 我對我正在創建的應用程式有疑問，我正在使用Oracle資料庫，並且我正在從資料庫中獲取資訊並透過表格將其呈現在螢幕上，但我想嘗試單獨處理這些數據，例如創建一個段落並顯示一個值。我只...
來自於 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY使用者登入後的授權流程 登入Google後，我無法在任何地方找到關於使用者授權帳戶的資訊。我有一個基於laravel的應用程序，它登錄到Google後，我們會收到用戶的電子郵件、令牌等信息，那麼我們如何將...
來自於 2024-04-04 09:40:59
0
1
310
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！