栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

刚看到这个效果的时候还真是和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
  弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时,该组件则为弹性容器,弹性容器的子组件为弹性项目。
 
 
  
   flex-direction: row
   
    
    
    
   
  
  
   flex-direction: column
   
    
    
    
   
  
  
   justify-content: flex-start
   
    
    
    
   
  
  
   justify-content: flex-end
   
    
    
    
   
  
  
   justify-content: center
   
    
    
    
   
  
  
   justify-content: space-between
   
    
    
    
   
  
  
   justify-content: space-around
   
    
    
    
   
  
  
   align-items: flex-end
   
    
    
    
   
  
  
   align-items: center
   
    
    
    
   
  

  
   align-items: center
   
    
    
    
   
  

 


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组件

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/93883.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号