uni-app list滑动组件下 ios高度样式混乱 安卓正常

uni-app list滑动组件下 ios高度样式混乱 安卓正常

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows 10

HBuilderX类型：正式

HBuilderX版本号：3.1.19

手机系统：iOS

手机系统版本号：iOS 12.1

手机厂商：苹果

手机机型：11

页面类型：nvue

打包方式：离线

示例代码：

<div ref="item" class="item" :style="{height:wHeight+'px'}">
<view>
<jVideo v-if="Math.abs(k-i)<=1" :state="item.state" :src="item.playUrl" :img="item.vodPic" :boxStyle="boxStyle"></jVideo>
</view>
</div>
————————————————————
this.wHeight = uni.getSystemInfoSync().screenHeight;
this.boxStyle.height = this.wHeight;

操作步骤：

<div ref="item" class="item" :style="{height:wHeight+'px'}">
<view>
<jVideo v-if="Math.abs(k-i)<=1" :state="item.state" :src="item.playUrl" :img="item.vodPic" :boxStyle="boxStyle"></jVideo>
</view>
</div>
————————————————————
this.wHeight = uni.getSystemInfoSync().screenHeight;
this.boxStyle.height = this.wHeight;

预期结果：

每次滑动 高度都应该正常整屏展示

实际结果：

ios第一个视频正常整屏展示，再往下滑动高度会递减 最后导致一个屏幕出现多个视频 再上下滑动高度样式混乱

bug描述：

（iphone11测试问题 nvue uniapp模式）用uniapp list(nvue)专用组件上下滑动事件，获取高度给他组件赋值样式，高度（是官方api获取的设备高度，安卓正常)苹果有兼容性问题，每次上下滑动高度或递增递减，类似问题像ios端软件盘高度与输入框弹起不兼容 正常ios端给其负的高度（cursor-spacing属性）就可以兼容ios，（已测试把下方tabber注释掉 没有tabber的情况下上下滑动 iphone6/11视频高度每次正常的）以此办法ios端获取高度减去tabber下方的高度 iphone6可以正常解决 上下滑动没问题，但是iphone11手机还是不兼容 不知道是否是刘海屏高度导致还是其他兼容性问题！ 烦请给其解决方案 急急急！！！

ios滑动出错.zip


更多关于uni-app list滑动组件下 ios高度样式混乱 安卓正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app list滑动组件下 ios高度样式混乱 安卓正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在iOS上使用uni.getSystemInfoSync().screenHeight获取屏幕高度时，需要注意这个值是包含状态栏和安全区域的完整屏幕高度。在iPhone 11等刘海屏设备上，实际可用高度需要减去安全区域。

建议改用以下方式获取可用高度：

const systemInfo = uni.getSystemInfoSync()
this.wHeight = systemInfo.windowHeight
this.boxStyle.height = this.wHeight

如果仍有问题，可以进一步处理安全区域：

const systemInfo = uni.getSystemInfoSync()
const safeArea = systemInfo.safeArea
this.wHeight = safeArea.height
this.boxStyle.height = this.wHeight

另外，在nvue页面中，建议使用flex:1布局来确保组件正确填充可用空间，而不是硬编码高度。可以尝试将外层容器样式改为：

.item {
  flex: 1;
}

如果涉及到底部TabBar，还需要减去TabBar的高度：

const systemInfo = uni.getSystemInfoSync()
this.wHeight = systemInfo.windowHeight - tabBarHeight
this.boxStyle.height = this.wHeight
回到顶部