收藏
回答

Win小程序对flex的space-evenly兼容性问题?

框架类型 问题类型 操作系统版本 手机型号 微信版本
小程序 Bug Win Win 3.2.1.154

描述:今天在做兼容性测试,同样的小程序,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上打开小程序:

回答关注问题邀请回答
收藏

1 个回答

  • 栉风
    栉风
    2021-11-29
    .tabs{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .tabs:before,.tabs:after{
      content:'';
      display:block;
    }
    前后各插入一个空元素就行了
    
    2021-11-29
    有用
    回复
登录 后发表内容