찾다

집 >위챗 애플릿 >미니 프로그램 개발 >WeChat Mini 프로그램: View(View Container) 구성요소 해석 및 분석

WeChat Mini 프로그램: View(View Container) 구성요소 해석 및 분석

高洛峰
高洛峰원래의
2017-03-16 14:09:035588검색

구성 요소 설명 보기:
보기컨테이너
HTML 코드의 DIV와 마찬가지로 다른 구성 요소를 래핑하거나 다른 구성 요소 내에 래핑할 수 있습니다. 비교적 사용이 자유롭고 고정된 구조가 없습니다.

구성요소 사용법 보기:

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

w샘플 프로젝트의 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 코드: 

.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 렌더링: 행:

微信小程序：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 렌더링: 열:

微信小程序：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;
}

View style 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（视图容器 ）组件解读和分析

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 렌더링:

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

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;
}

Main속성:

wxss에 사용되는 배열(flex-direction)

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

wxss에 사용되는 유연한 항목 내용 정렬(justify-content)

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

항목의 내부 축 정렬 wxss용 컨테이너( align-items)

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

위 내용은 WeChat Mini 프로그램: View(View Container) 구성요소 해석 및 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：WeChat 애플릿 개발은 로딩 구성 요소를 사용하여 로딩 애니메이션 방법을 표시합니다.다음 기사：WeChat 애플릿 개발은 로딩 구성 요소를 사용하여 로딩 애니메이션 방법을 표시합니다.

관련 기사

더보기