uni-app web-view支付宝小程序真机运行效果导航会把跳转到的h5页面覆盖但是支付宝编辑器和微信小程序的效果都正常

uni-app web-view支付宝小程序真机运行效果导航会把跳转到的h5页面覆盖但是支付宝编辑器和微信小程序的效果都正常

开发环境 版本号 项目创建方式
Windows 24H2 HBuilderX

示例代码：

<template>
<view class="page-container">
<web-view :src="src"></web-view>
</view>
</template>  

<script>
export default {
data() {
return {
src: '',
};
},
onLoad(option) {
console.log(option, 'option------------------');
this.src=option.url;
// 网约车 基础信息 默认跳转地
},
};
</script>  

<style lang="scss" scoped>
</style>

操作步骤：

11111

预期结果：

11111

实际结果：

1111

bug描述：

web-view跳转到h5页面，支付宝小程序真机运行导航会压住页面，但是支付宝开发者工具效果正常的和微信小程序效果一样。


更多关于uni-app web-view支付宝小程序真机运行效果导航会把跳转到的h5页面覆盖但是支付宝编辑器和微信小程序的效果都正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个模拟器正常，但是真机失效的问题，可能你得需要到支付宝社区反馈才能够解决

更多关于uni-app web-view支付宝小程序真机运行效果导航会把跳转到的h5页面覆盖但是支付宝编辑器和微信小程序的效果都正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是支付宝小程序真机运行时的已知问题，web-view组件在支付宝小程序中会默认显示导航栏，导致覆盖H5页面内容。解决方案如下：

  1. 在支付宝小程序配置文件中设置：
{
  "window": {
    "transparentTitle": "always",
    "titlePenetrate": "YES"
  }
}
  1. 或者在uni-app的pages.json中配置：
{
  "style": {
    "navigationBarTitleText": "",
    "navigationStyle": "custom"
  }
}
  1. 如果仍然有问题，可以尝试在H5页面中添加CSS：
body {
  padding-top: 60px; /* 根据实际导航栏高度调整 */
}
回到顶部