safeAreaTop 在小米下面有点问题

比特蚂蚁

代码如下：

1. <template name='myinfo'>
   
2.         <scroll-view class="main" scroll-y>
   
3.                 <safe-area>
   
4.                         <view class="header">
   
5.                                 <text class="htitle">{{transmy}}</text>
   
6.                         </view>
   
7.                 </safe-area>
   
8.                 <view class="back-btn" style={{'top:'+safeAreaTop+'px'}} @click="closeWin">
   
9.                         <img class="back-btn-img" src="../../image/back-btn.png" alt=""></img>
   
10.                 </view>
    
11.                 <view class="right" style={{'top:'+safeAreaTop+'px'}} @click="fnModifyMyinfo">
    
12.                         <text class="righttext">{{transmodify}}</text>
    
13.                 </view>
    
14.                 <view class="bodyinfo">
    
15.                         <text class="schoolitem">{{transname}}：{{userInfo.name}}</text>
    
16.                         <text class="schoolitem">{{transsex}}：{{sex}}</text>
    
17.                         <text class="schoolitem">{{transisreg}}：{{ifreg}}</text>
    
18.                         <text class="schoolitem">{{transisvvip}}：{{ifvvip}}</text>
    
19.                         <text class="schoolitem">{{transwechatid}}：{{userInfo.wechatid}}</text>
    
20.                         <text class="schoolitem">{{transgradyear}}：{{userInfo.studentstep}}</text>
    
21.                         <text class="schoolitem">{{transbirthday}}：{{userInfo.birthday}}</text>
    
22.                         <text class="schoolitem">{{transtype}}：{{userInfo.studenttype}}</text>
    
23.                         <text class="schoolitem">{{transtocayear}}：{{userInfo.tocanadayear}}</text>
    
24.                         <text class="schoolitem">{{transhomeaddress}}：{{userInfo.homeaddress}}</text>
    
25.                         <text class="schoolitem">{{transmobile}}：{{userInfo.telphone}}</text>
    
26.                         <text class="schoolitem">{{transmail}}：{{userInfo.email}}</text>
    
27.                         <text class="schoolitem">{{transstudentno}}：{{userInfo.name}}</text>
    
28.                         <text class="schoolitem">{{transellstart}}：{{ellstartdate}}</text>
    
29.                         <text class="schoolitem">{{transellend}}：{{ellenddate}}</text>
    
30.                 </view>
    
31.         </scroll-view>
    
32. </template>

复制代码

效果如下：
左侧是苹果手机，正常，右侧是小米，把字（修改）挡着了

技术咨询-特特

这边确认一下

技术咨询-F

1. <template name='myinfo'>
   
2.         <scroll-view class="main" scroll-y>
   
3.                 <safe-area>
   
4.                         <view class="header">
   
5.                                 <text class="htitle">测试</text>
   
6.                         </view>
   
7. 
   
8. 
   
9.                 </safe-area>
   
10.                 <view>
    
11.                         <view><text>12345</text></view>
    
12.                         <view><text>12345</text></view>
    
13.                         <view><text>12345</text></view>
    
14.                         <view><text>12345</text></view>
    
15.                         <view><text>12345</text></view>
    
16.                         <view><text>12345</text></view>
    
17.                 </view>
    
18.         </scroll-view>
    
19. </template>
    
20. <style>
    
21. .header {
    
22.         margin: auto;
    
23. }
    
24. </style>

复制代码

运行这段代码看有问题吗

比特蚂蚁

这个是没有问题的，其他页面都用到了，没有问题

技术咨询-F

那就可以了吧，直接往下排就行啊

比特蚂蚁

关键是在苹果下面是没有问题的，在安卓上是有问题的，应该怎么排？

技术咨询-F

比特蚂蚁 · 2022-9-21 19:01关键是在苹果下面是没有问题的，在安卓上是有问题的，应该怎么排？

我发的页面在Android 显示正常吗

比特蚂蚁

已经解决了  感谢解答

勇可可【1161277121】

应该是你的header 样式有问题 解决了就行