uni-app 首页用了leftwindow模式,在rightwindow用了组件web-view,web-view显示的是leftwindow的内容

uni-app 首页用了leftwindow模式,在rightwindow用了组件web-view,web-view显示的是leftwindow的内容

开发环境 版本号 项目创建方式
Windows window 8 HBuilderX

示例代码:

<template>
<web-view  src="http//:baidu.com"></web-view>
</template>

操作步骤:

预期结果:

实际结果:

bug描述:

首页用了leftwindow模式,在rightwidow用了组件web-view,web-view显示的是leftwidow的内容


更多关于uni-app 首页用了leftwindow模式,在rightwindow用了组件web-view,web-view显示的是leftwindow的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 首页用了leftwindow模式,在rightwindow用了组件web-view,web-view显示的是leftwindow的内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题分析:这是由于leftWindow和rightWindow的层级关系导致的显示异常。

解决方案:

  1. 检查leftWindow的样式,确保其z-index值不会覆盖rightWindow
  2. 在pages.json中正确配置leftWindow和rightWindow的尺寸和位置
  3. 确认web-view组件在rightWindow中的正确位置

推荐配置示例:

{
  "leftWindow": {
    "path": "pages/left/left",
    "style": {
      "width": "300px",
      "z-index": 999
    }
  },
  "rightWindow": {
    "path": "pages/right/right", 
    "style": {
      "width": "calc(100% - 300px)",
      "left": "300px",
      "z-index": 1000
    }
  }
}
回到顶部