收藏
回答

web-view组件在真机调试的时候,fixed的bottom样式出错?

微信开发者工具版本:Stable v1.05.2111300

操作系统:macOS Monterey 12.0.1(21A559)

手机系统:iphonex 15.1

现象:扫码调试或者自动真机调试的时候,wev-view的html内部的固定的底部元素样式如下

#footerbar {

position: fixed;

left: 0;

bottom: 0;

width:100px;

height: 100px;

}

footerbar会看不到,因为在屏幕外部了,修改为

#footerbar {

position: fixed;

left: 0;

bottom: 88px; // 这里修改

width:100px;

height: 100px;

}

则正常显示。一旦断开真机调试,打开手机上的小程序则显示正常。

原因:

扫码或者自动编译,当且仅当连接微信工具调试的时候,webview的body的高度始终为屏幕的高度(包括了顶部的导航栏),导致底部的元素在屏幕外部。

备注:仅仅在扫码编译或者自动编译,真机调试的时候,一旦断开连接,退出调试模式,则正常显示。

小程序页面布局如下:

	<view>
		<web-view src="https://www.xxx.com"></web-view>
	</view>
回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2021-12-30

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2021-12-30
    有用
    回复 1
    • 阳光灿烂
      阳光灿烂
      2022-01-07
      此问题简单说就是微信内部页面显示webview组件的时候,webview的body在上述环境下(机型、微信版本、系统版本已描述),当扫码连接调试的时候,body的高度是包括了顶层的导航栏的高度,导致底部区域的内容在屏幕外。
      2022-01-07
      回复
登录 后发表内容