自定义导航栏模式下,切换页面过程出现没完全满屏情况造成页面底部的内容闪动
发布于 6 年前 作者 rqin 7783 次浏览 来自 问答

问题仅限于IOS的微信客户端

  • 当前 Bug 的表现(可附上截图)
  • 预期表现

不应出现紫色块(紫色是app.json中window.backgroundColorBottom设置的颜色)

  • 复现路径

app配置自定义导航栏(“navigationStyle”“custom”)

点击列表页面中项到详情页,详情页切换显示的时候不是全屏状态会出现页面闪动;

出现概率:大概点击跳转6-7次会出现一次,当详情页面内容比较多时,概率会明显上升

测试机:iphone 6sp

性能高的机器复现概率比较低

  • 提供一个最简复现 Demo

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/index/test"
  ],
  "window":{
    "navigationStyle": "custom",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#f44336",
    "backgroundColorTop": "#e91e63",
    "backgroundColorBottom": "#9c27b0"
  }
}

pages/index/index.wxml

<!--index.wxml-->

<view class="container" style='display:flex;flex-flow:row wrap;'>
  <view wx:for="{{array}}"><navigator url='./test' style='width:371rpx;height:600rpx;background:url(https://developers.weixin.qq.com/miniprogram/introduction/image/a.png);border:1px solid white;'></navigator></view>
</view>

pages/index/test.wxml

<!--pages/index/test.wxml-->
<view style='height:100%;display:flex;align-items: center;justify-content: center;'>
<navigator open-type='navigateBack'>
  <image src='https://developers.weixin.qq.com/miniprogram/introduction/image/a.png'></image>
</navigator>
</view>

pages/index/test.wxss

/* pages/index/test.wxss */
page {
  height:60% !important;
  background: #4caf50;
}
1 回复

提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

回到顶部