Win小程序对flex的space-evenly兼容性问题?
发布于 4 年前 作者 mamin 11644 次浏览 来自 问答

描述:今天在做兼容性测试,同样的小程序,flex的属性在Win上打开跟在Mac上打开表现不同(在真机上都正常)。

定位问题:在模拟器上测试了一下,如果把 justify-content: space-evenly; 去掉,UI表现就跟Win打开的小程序一样。

总结:测试下来 justify-content: space-evenly; 只在Win的小程序上表现异常。

代码(代码用的Taro+React,写法不同,但是编译完都是一样的。):

<View className='tabs'>
  <View
    className={classnames('tab', {'act': tabId === 1})}
    onClick={changeTab.bind(this, 1)}
  >
    <Text>今日接诊 ({list1Total})</Text>
    <View className='act-line' />
  </View>
  <View
    className={classnames('tab', {'act': tabId === 2})}
    onClick={changeTab.bind(this, 2)}
  >
    <Text>累计接诊 ({list2Total})</Text>
    <View className='act-line' />
  </View>
</View>
.tabs {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    height: 88px;
    .tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 30px;
      color: #999;
      line-height: 46px;
      .act-line {
        width: 48px;
        height: 8px;
        background: transparent;
        border-radius: 4px;
        margin-top: 8px;
        margin-bottom: 4px;
      }
      &.act {
        color: #333;
        font-weight: bold;
        .act-line {
          background: #06b385;
        }
      }
    }
  }

Win上打开小程序:

Mac上打开小程序:

回到顶部