<template>
<view class="webview-container">
<web-view ref="webview" class="webview" :src="webPath"></web-view>
</view>
</template>
<style lang="scss" scoped>
.webview-container {
flex: 1;
background-color: red;
.webview {
flex: 1;
}
}
</style>
d***@163.com
- 发布：2025-11-21 18:30
- 更新：2025-11-21 18:30
- 阅读：24
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 6AA30D0B-46C5-43C6-A317-E0E9FA17F526
HBuilderX类型： 正式
HBuilderX版本号： 4.85
手机系统： iOS
手机系统版本号： iOS 16
手机厂商： 苹果
手机机型： iphone 12pro max
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
<template>
<view class="webview-container">
<web-view ref="webview" class="webview" :src="webPath"></web-view>
</view>
</template>
<style lang="scss" scoped>
.webview-container {
flex: 1;
background-color: red;
.webview {
flex: 1;
}
}
</style>
<template>
<view class="webview-container">
<web-view ref="webview" class="webview" :src="webPath"></web-view>
</view>
</template>
<style lang="scss" scoped>
.webview-container {
flex: 1;
background-color: red;
.webview {
flex: 1;
}
}
</style>预期结果：
铺满ios屏幕
铺满ios屏幕
实际结果：
底部一片白屏
底部一片白屏
bug描述：
nvue webview flex:1铺满手机屏幕不生效，ios底部一片白屏，官方文档自己标注使用flex:1 就能铺满
