uni-app nvue页面list设置高度等于windowHeight,部分机型偶发无法滑动问题

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app nvue页面list设置高度等于windowHeight,部分机型偶发无法滑动问题

开发环境 版本号 项目创建方式
uni-app
<template> <view> <list @scroll="scroll" :style="{height:(windowHeight-1)+'px'}">
<cell> <view style="height:10px;flex:1;background-color:#f7f7f7;"></view> </cell> </list>
    <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}`)
    };
}

此外,为避免偶发的滑动问题,可以考虑以下几点:

  1. 确保nvue组件正确渲染:在onReady生命周期中设置高度,确保页面已完全加载。
  2. 使用overflow-y: auto;:确保list元素在内容超出时能够滚动。
  3. 避免CSS冲突:检查是否有其他CSS样式影响了list的滚动行为,如overflowposition等属性。
  4. 测试多种机型:在多种机型和屏幕尺寸上测试应用,确保兼容性和稳定性。

通过上述代码和注意事项,可以较好地解决nvue页面中list高度设置为windowHeight时可能出现的偶发滑动问题。如果问题依然存在,建议进一步检查具体的机型和系统版本,以及是否有其他第三方库或框架干扰了原生滚动行为。

回到顶部