uni-app nvue页面不能滚动

uni-app nvue页面不能滚动

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

示例代码：

{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app"
        }
    }],
    "subPackages": [{
        "root": "pages/test",
        "pages": [{
            "path": "temp",
            "style": {
                "navigationBarTitleText": "temp"
            }
        }]
    }],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

<template>
    <view class="body">
        <view class="txt" v-for="i in 100" :key="i">
            <text>asf</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        }
    }
}
</script>

<style>
.txt {
    background-color: #abc;
    margin: 10px;
    height: 30px;
}
</style>

更多关于uni-app nvue页面不能滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

后来解决了吗？

更多关于uni-app nvue页面不能滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决了吗

应该用list

我想要的是页面能够自动滚动 因为我页面里面有滚动区块

如果用list和scroll-view是差不多的

在 nvue 页面中，滚动问题通常是由于布局方式导致的。nvue 使用原生渲染，其布局模型与 web 不同，默认采用 flex 布局且方向为 column。

根据你的代码，<view class="body"> 作为容器，默认高度不会超出屏幕，因此内部内容无法滚动。要解决此问题，你需要为滚动容器明确设置 flex: 1 样式，使其撑满剩余空间，并添加 scrollable 属性或使用特定的滚动组件。

解决方案如下：

  1. 为根容器设置 flex: 1：确保页面根视图占满整个屏幕高度。
  2. 使用 scroll-view 组件：这是 nvue 中实现滚动的推荐方式。将需要滚动的内容放入 <scroll-view> 中，并为其设置 flex: 1。

修改后的示例代码：

<template>
    <!-- 根view设置为flex:1，确保占满屏幕 -->
    <view class="body" style="flex: 1;">
        <!-- 使用scroll-view作为滚动容器 -->
        <scroll-view style="flex: 1;" scroll-y="true">
            <view class="txt" v-for="i in 100" :key="i">
                <text>asf</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {}
    }
}
</script>

<style>
.txt {
    background-color: #abc;
    margin: 10px;
    height: 30px;
}
</style>
回到顶部