描述:今天在做兼容性测试,同样的小程序,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上打开小程序:
.tabs{ display:flex; align-items:center; justify-content:space-between; } .tabs:before,.tabs:after{ content:''; display:block; } 前后各插入一个空元素就行了