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

问题仅限于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）。

回到顶部