小程序教程

微信小程序把玩（八）view组件

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

刚看到这个效果的时候还真是和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

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <text class="page__title">view</text>
  4.         <text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="section">
  8.             <view class="section__title">flex-direction: row</view>
  9.             <view class="flex-wrp" style="flex-direction:row;">
  10.                 <view class="flex-item" style="background: red"></view>
  11.                 <view class="flex-item" style="background: green"></view>
  12.                 <view class="flex-item" style="background: blue"></view>
  13.             </view>
  14.         </view>
  15.         <view class="section">
  16.             <view class="section__title">flex-direction: column</view>
  17.             <view class="flex-wrp" style="height: 300px;flex-direction:column;">
  18.                 <view class="flex-item" style="background: red"></view>
  19.                 <view class="flex-item" style="background: green"></view>
  20.                 <view class="flex-item" style="background: blue"></view>
  21.             </view>
  22.         </view>
  23.         <view class="section">
  24.             <view class="section__title">justify-content: flex-start</view>
  25.             <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
  26.                 <view class="flex-item" style="background: red"></view>
  27.                 <view class="flex-item" style="background: green"></view>
  28.                 <view class="flex-item" style="background: blue"></view>
  29.             </view>
  30.         </view>
  31.         <view class="section">
  32.             <view class="section__title">justify-content: flex-end</view>
  33.             <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
  34.                 <view class="flex-item" style="background: red"></view>
  35.                 <view class="flex-item" style="background: green"></view>
  36.                 <view class="flex-item" style="background: blue"></view>
  37.             </view>
  38.         </view>
  39.         <view class="section">
  40.             <view class="section__title">justify-content: center</view>
  41.             <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
  42.                 <view class="flex-item" style="background: red"></view>
  43.                 <view class="flex-item" style="background: green"></view>
  44.                 <view class="flex-item" style="background: blue"></view>
  45.             </view>
  46.         </view>
  47.         <view class="section">
  48.             <view class="section__title">justify-content: space-between</view>
  49.             <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
  50.                 <view class="flex-item" style="background: red"></view>
  51.                 <view class="flex-item" style="background: green"></view>
  52.                 <view class="flex-item" style="background: blue"></view>
  53.             </view>
  54.         </view>
  55.         <view class="section">
  56.             <view class="section__title">justify-content: space-around</view>
  57.             <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
  58.                 <view class="flex-item" style="background: red"></view>
  59.                 <view class="flex-item" style="background: green"></view>
  60.                 <view class="flex-item" style="background: blue"></view>
  61.             </view>
  62.         </view>
  63.         <view class="section">
  64.             <view class="section__title">align-items: flex-end</view>
  65.             <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
  66.                 <view class="flex-item" style="background: red"></view>
  67.                 <view class="flex-item" style="background: green"></view>
  68.                 <view class="flex-item" style="background: blue"></view>
  69.             </view>
  70.         </view>
  71.         <view class="section">
  72.             <view class="section__title">align-items: center</view>
  73.             <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
  74.                 <view class="flex-item" style="background: red"></view>
  75.                 <view class="flex-item" style="background: green"></view>
  76.                 <view class="flex-item" style="background: blue"></view>
  77.             </view>
  78.         </view>

  80.        <view class="section">
  81.             <view class="section__title">align-items: center</view>
  82.             <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-start">
  83.                 <view class="flex-item" style="background: red"></view>
  84.                 <view class="flex-item" style="background: green"></view>
  85.                 <view class="flex-item" style="background: blue"></view>
  86.             </view>
  87.         </view>

  89.     </view>
  90. </view>
复制代码

wxss

  1. .flex-wrp{
  2.     height: 100px;
  3.     display:flex;
  4.     background-color: #FFFFFF;
  5. }
  6. .flex-item{
  7.     width: 100px;
  8.     height: 100px;
  9. }
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习