uni-app 红米Note7Pro给web-view设置相对定位（随窗口滚动）无效

uni-app 红米Note7Pro给web-view设置相对定位（随窗口滚动）无效

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：红米note 7 rop

页面类型：vue

打包方式：云端

示例代码：

<template>
    <view class="body">  
        <view>我是背景1</view>  
        <view>我是背景2</view>  
        <view>我是背景3</view>  
        <view>我是背景4</view>  
        <view>我是背景5</view>  
        <view>我是背景6</view>  
        <view>我是背景7</view>  
        <web-view src="https://baidu.com"></web-view>  
    </view>
</template>  
<script>  
export default{  
    data(){return {}},  
    methods: {  

    },  
    onLoad:function(options){  

    },  
    onReady(){  
        var wv = this.$scope.$getAppWebview().children()[0]  
        wv.setStyle({  
            height: 300,  
            top: 100,  
            position: 'static'//窗口随着滚动条滚动，默认为绝对定位  
        })  
    }  
}  
</script>  
<style>  
.body{  
    height: 200vh;  
}  
view{  
    height: 30vh;  
    color: #FFF;  
}  
view:nth-of-type(1){background: black;}  
view:nth-of-type(2){background: red;}  
view:nth-of-type(3){background: blue;}  
view:nth-of-type(5){background: white;}  
view:nth-of-type(4){background: grey;}  
view:nth-of-type(6){background: yellow;}  
view:nth-of-type(7){background: black;}  
</style>


操作步骤：

直接将demo运行到红米 7 note pro中。MIUI版本是12.5.1

预期结果：

窗口随着页面滚动


实际结果：

在红米 7 note pro中，frame不会随着窗口滚动

bug描述：

页面中创建web-view标签。用js修改窗口的position（排版位置）为static（控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动）无效。 ios 6 plus可以。

如果web-view窗口是通过 plus.webview.create 创建的。则没有bug。但是窗口是通过<web-view></web-view>标签创建的。则有bug


更多关于uni-app 红米Note7Pro给web-view设置相对定位（随窗口滚动）无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

真没人处理bug是吧

更多关于uni-app 红米Note7Pro给web-view设置相对定位（随窗口滚动）无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在Android平台上的web-view定位问题。问题核心在于通过标签创建的web-view在Android上默认使用原生WebView组件，其定位行为与iOS存在差异。

问题分析：

  1. 平台差异：iOS的web-view支持position: 'static'设置，能正常随页面滚动。但Android原生WebView在部分机型上（特别是小米MIUI系统）对position属性的支持不完整。
  2. 创建方式差异：通过plus.webview.create()创建的web-view使用的是5+ Runtime的渲染机制，而标签创建的是原生组件，两者底层实现不同。

解决方案：

  1. 使用fixed定位替代（推荐）：
wv.setStyle({
    height: 300,
    top: 100,
    position: 'fixed'
})

然后在页面滚动时通过JS动态计算并更新top值，模拟相对定位效果。

  1. 改用plus.webview.create创建： 既然你提到这种方式没有bug，可以考虑在需要相对定位的场景下使用API创建：
var wv = plus.webview.create('https://baidu.com', 'webview', {
    top: '100px',
    height: '300px',
    position: 'static'
})
回到顶部