2021SC@SDUSC

Hippy项目源码分析第三周


本篇内容接上周分析

FlexAlign

Flex项目在容器侧轴对齐方式，类似于FlexJustify，只不过不是水平方向，而是纵向，这个属性可以设置所有Flex项目对齐方式，并且包括匿名元素

  • STRETCH
    STRETCH
    Flex项目沿着Flex容器侧轴方向填满整个Flex容器高度（或宽度）
  • FLEX_START
    FLEX_START
    Flex项目并列在Flex容器侧轴开始处
  • FLEX_END
    FLEX_END
    Flex项目排列在Flex容器侧轴结束处
  • CENTER
    CENTER
    Flex项目排列在Flex容器侧轴中间处
  • BASELINE
    BASELINE
    Flex项目按文本基线在Flex容器侧轴中排
  • SPACE_BETWEEN
    SPACE_BETWEEN
    Flex项目行与行之间间距相等，并且Flex项目行第一行排在Flex容器侧轴开始之处，Flex项目行最后一行排在Flex容器侧轴末位之处
  • SPACE_AROUND
    SPACE_AROUND
    Flex项目行的上下间距相等，并且沿Flex容器侧轴排列

默认值：STRETCH

FlexGrow

flexGrow定义伸缩项目的扩展能力，他接受一个不带单位的值作为一个比例，主要用来决定伸缩容器剩余空间按比例应扩展多少空间
如果所有伸缩项目的flex-grow设置了1，那么每个伸缩项目将设置为一个大小相等的剩余空间，如果你给其中一个伸缩项目设置了flex-grow值为2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍

类型必需
number否

FlexShrink

注意：Hippy中flexShrink的默认值为0，与Web标准有差异
flexBasis属性指定了flex元素的收缩规则，flex元素仅在默认宽度之和大于容器的时候才会发生收缩。其收缩的大小是依据flex-shrink的值

类型必需
number否

FlexOverflow

overflow定义了子元素超过父元素容器高度后的显示情况overflow：hidden的情况会导致子元素被父元素切割超出显示范围的部分，overflow：visible会让子容器正常显示全部，即使超出父容器的显示范围

类型必需
enum(‘visible’,‘hidden’)否

FlexPositionType

position在Hippy里表现与CSS基本一致，但是所有时候都是默认为relative，所以当元素设置absolute的时候可以保证永远只对上一级父元素绝对定位
他和CSS的position属性类似，但hippy里的position只有absolute与relative两个属性

类型必需
enum(‘absolute’,‘relative’)否
Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

taro 动态设置标题栏、标题栏动画

导航栏文字旁显示加载菊花图Taro.showNavigationBarLoading()Taro.hideNavigationBarLoading()设置标题栏文字Taro.setNavigationBarTitle({title:'xx'})设置标题栏背景色Taro.setNavigationBarColor({backgroundColor:'16进制颜色',frontColor:'#ffff

avatar 智屏生态联盟

taro 获取用户信息getUserInfo、OpenData

getUserInfo:(1)给按钮添加属性和回调openType='getUserInfo'onGetUserInfo={this.回调}(2)在允许获取信息后,通过Taro.getUserInfo获取方式一Taro.getUserInfo({success: function(res) {console.log(res.userInfo);}})

avatar 智屏生态联盟