지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 미니 프로그램 개발 > 본문

WeChat 미니 프로그램의 공식 구성 요소에 대한 해석 및 분석: 1. 보기(컨테이너 보기)

巴扎黑
풀어 주다： 2017-03-19 18:20:25
원래의
1612명이 탐색했습니다.

뷰 컴포넌트 설명:
뷰 컨테이너
는 HTML 코드의 p와 동일하며 다른 컴포넌트를 래핑하거나 다른 컴포넌트 내에 래핑할 수 있습니다. 비교적 사용이 자유롭고 고정된 구조가 없습니다.

구성요소 사용법 보기:
샘플 프로젝트 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- 방향: 열 렌더링:

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;
    }
로그인 후 복사


보기 스타일 정당화- 내용: 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 렌더링: 센터:

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

弹性项目平均分布在该行上，两边留有一半的间隔空间


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

속성

属性

描述

stretch

默认值，弹性项目被拉伸以适应容器

center

弹性项目位于容器的中心

flex-start

弹性项目位于容器的开头

flex-end

弹性项目位于容器的结尾

baseline

弹性项目位于容器的基线上

설명

늘이기

기본값, 플렉스 항목은 컨테이너에 맞게 늘어납니다

center

Flex 항목은 컨테이너 중앙에 위치합니다

플렉스 스타트

flex-start 컨테이너의 시작 부분

flex-end

Flex 항목은 컨테이너 끝에 있습니다.

기준선

Flex 항목은 컨테이너의 기준선에 위치합니다 td>

위 내용은 WeChat 미니 프로그램의 공식 구성 요소에 대한 해석 및 분석: 1. 보기(컨테이너 보기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
微信小程序官方组件解读和分析：一、view（视图容器 ）
원천：php.cn
이전 기사：WeChat 미니 프로그램 프런트 엔드 소스 코드 및 예제 분석에 대한 자세한 설명 다음 기사：WeChat 애플릿 구성 요소의 해석 및 분석: 2. 스크롤 뷰(스크롤 가능한 뷰 영역)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1840
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2009
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1694
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1594
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1612
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿