uni-app nvue页面list设置高度等于windowHeight,部分机型偶发无法滑动问题
uni-app nvue页面list设置高度等于windowHeight,部分机型偶发无法滑动问题
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
uni-app | 无 | 无 |
<view>
<!-- 这里是弹出层之类的,不占用高度 -->
</view>
</view>
</template>
绝大部分机型是没有问题的,但是在少数少数设备上反馈不能滚动
1 回复
在uni-app中使用nvue页面时,若要将list的高度设置为等于windowHeight,并且在所有机型上确保滑动功能正常,可以考虑使用nvue提供的API和样式设置来实现。以下是一个示例代码,展示了如何动态设置list的高度,并尽可能避免偶发的滑动问题。
首先,确保在nvue页面的<script>
部分引入必要的API,并获取窗口高度:
export default {
data() {
return {
windowHeight: 0
};
},
onReady() {
// 获取窗口高度
plus.webview.currentWebview().evaluateJS(`
window.uni = {
getHeight: function() {
return window.innerHeight;
}
};
`, (result) => {
// 解析并设置窗口高度
const heightResult = JSON.parse(result);
this.windowHeight = heightResult.result.getHeight();
}, (error) => {
console.error('Failed to get window height:', error);
});
}
};
然后,在nvue页面的<template>
部分,使用动态绑定的方式设置list的高度:
<template>
<div>
<list id="myList" style="height: {{windowHeight}}px; overflow-y: auto;">
<cell v-for="(item, index) in items" :key="index">
{{ item }}
</cell>
</list>
</div>
</template>
在<script>
部分,还需定义items
数组以填充list内容:
data() {
return {
windowHeight: 0,
items: Array.from({length: 50}, (_, i) => `Item ${i + 1}`)
};
}
此外,为避免偶发的滑动问题,可以考虑以下几点:
- 确保nvue组件正确渲染:在
onReady
生命周期中设置高度,确保页面已完全加载。 - 使用
overflow-y: auto;
:确保list元素在内容超出时能够滚动。 - 避免CSS冲突:检查是否有其他CSS样式影响了list的滚动行为,如
overflow
、position
等属性。 - 测试多种机型:在多种机型和屏幕尺寸上测试应用,确保兼容性和稳定性。
通过上述代码和注意事项,可以较好地解决nvue页面中list高度设置为windowHeight时可能出现的偶发滑动问题。如果问题依然存在,建议进一步检查具体的机型和系统版本,以及是否有其他第三方库或框架干扰了原生滚动行为。