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

2019-11-20 08:52:14

字体：大中小

来源：转载

供稿：网友

刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样.

view这个组件就是一个视图组件使用起来非常简单。

主要属性：

flex-direction：主要两个特性”row”横向排列”column”纵向排列

justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）

可选属性 (‘flex-start', ‘flex-end', ‘center', ‘space-between', ‘space-around')

align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）

可选属性 (‘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>

wxss

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

相关文章：

hello WeApp                     icon组件
Window                             text组件                                 switch组件
 tabBar底部导航               progress组件                         action-sheet
应用生命周期                     button组件                            modal组件
页面生命周期                     checkbox组件                       toast组件
模块化详                            form组件详                            loading 组件
数据绑定                            input 组件                             navigator 组件
 View组件                         picker组件                             audio 组件
 scroll-view组件                  radio组件                               video组件
 swiper组件                       slider组件                             Image组件

上一篇：微信小程序（九）scroll-view组件详细介绍

下一篇：微信小程序（七）数据绑定详细介绍

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注

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

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