Detailed introduction of WeChat applet View component-Mini Program Development-php.cn

Detailed introduction of WeChat applet View component

高洛峰

Release： 2017-02-23 15:10:57

Original

2271 people have browsed it

This article mainly introduces the relevant information about the detailed introduction of the View component of the WeChat applet. Friends who need it can refer to it

微信小程序 View组件详细介绍

When I first saw this effect, it was really The effect is consistent with ReactNative, and the properties are basically the same.

view This component is a view component and is very simple to use.

Main attributes:

flex-direction: Main two properties: "row" horizontal arrangement "column" vertical arrangement

justify- content Alignment of the main axis (if flex-direction is row, the main axis is horizontal)

Optional attributes ('flex-start', 'flex-end', 'center', 'space- between', 'space-around')

align-items Cross-axis alignment If flex-direction is row, the cross-axis is the vertical direction)

Optional attributes ('flex-start', 'flex-end', 'center')

wxml

<view class="page">
 <view class="page__hd">
  <text class="page__title">view</text>
  <text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>
 </view>
 <view class="page__bd">
  <view class="section">
   <view class="section__title">flex-direction: row</view>
   <view class="flex-wrp" style="flex-direction:row;">
    <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>
  </view>
  <view class="section">
   <view class="section__title">flex-direction: column</view>
   <view class="flex-wrp" style="height: 300px;flex-direction: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>
  </view>
  <view class="section">
   <view class="section__title">justify-content: flex-start</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: 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>
  </view>
  <view class="section">
   <view class="section__title">justify-content: flex-end</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: 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>
  </view>
  <view class="section">
   <view class="section__title">justify-content: center</view>
   <view class="flex-wrp" style="flex-direction:row;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>
  </view>
  <view class="section">
   <view class="section__title">justify-content: space-between</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: 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>
  </view>
  <view class="section">
   <view class="section__title">justify-content: space-around</view>
   <view class="flex-wrp" style="flex-direction:row;justify-content: 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>
  </view>
  <view class="section">
   <view class="section__title">align-items: flex-end</view>
   <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;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>
  </view>
  <view class="section">
   <view class="section__title">align-items: center</view>
   <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;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>
  </view>

  <view class="section">
   <view class="section__title">align-items: center</view>
   <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;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>
  </view>

 </view>
</view>

Copy after login

wxss

.flex-wrp{
 height: 100px;
 display:flex;
 background-color: #FFFFFF;
}
.flex-item{
 width: 100px;
 height: 100px;
}

Copy after login

For more detailed introduction to the WeChat applet View component and related articles, please pay attention to the PHP Chinese website!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Detailed introduction of WeChat applet View component