uni-app 在nvue vue3 ts setup中使用scroll-view的bug

uni-app 在nvue vue3 ts setup中使用scroll-view的bug

项目属性 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 win10
手机系统 Android
手机系统版本号 Android 7.1.1
手机厂商 模拟器
手机机型
页面类型 nvue
vue版本 vue3
打包方式 离线
项目创建方式 CLI
CLI版本号 3.0.0-alpha-3040620220415002

示例代码:

  1. 新建一个自定组件a.vue:

    <script lang="ts" setup>  
    <template>  
    <view><slot></slot></view>  
    </template>  
    </script>  
  2. 新建一个页面test.nvue

    <script lang="ts" setup>  
    import avue from "./a.vue"  
    <template>  
    <view>  
       <avue>  
          <scroll-view scroll-y style="height:100rpx">    
              <view style="height:1000rpx;background:red"></view>  
         </scroll-view>  
       </avue>  
    
    </view>  
    </template>  
    </script>  

操作步骤:

  1. 新建一个自定组件a.vue:
  2. 新建一个页面test.nvue 如上代码。
  3. 在运行到安卓机上演示。

预期结果:

可以滚动内容

实际结果:

无法滚动,只出现一个滚动条。

bug描述:

首先这个bug我已经远程和你们的技术人员演示过,确认存在的bug.你们技术人员让我重新开个ask提交。

  1. 在组件插槽中,使用scroll-view,
  2. 不管如何定义宽高,滚动无效。可以看到有滚动条,但无法滚动。
  3. 在真机ios上测试没有问题。
2 回复

uni-app 中使用 nvue 页面,并结合 Vue 3TypeScriptsetup 语法时,可能会遇到 scroll-view 组件的一些问题或 bug。以下是一些常见的问题及其可能的解决方案:

1. scroll-view 无法滚动

  • 问题描述: 在 nvue 页面中,scroll-view 组件可能无法正常滚动。

  • 解决方案:

    • 确保 scroll-view 的高度设置正确。scroll-view 需要明确的高度才能滚动。
    • 检查 scroll-view 的子元素是否超出了 scroll-view 的高度。
    • nvue 中,scroll-view 的滚动行为可能与 vue 页面有所不同,确保你理解 nvue 的布局机制。
    <template>
      <scroll-view style="height: 100vh;">
        <view v-for="item in items" :key="item.id">{{ item.text }}</view>
      </scroll-view>
    </template>

2. scroll-viewscroll-topscroll-left 不生效

  • 问题描述: 在 nvue 页面中,scroll-viewscroll-topscroll-left 属性可能无法正确设置。

  • 解决方案:

    • 确保 scroll-viewscroll-topscroll-left 属性是动态绑定的,并且在数据更新后重新渲染。
    • 使用 refreactive 来管理 scroll-topscroll-left 的值,并在需要时更新。
    <template>
      <scroll-view :scroll-top="scrollTop" style="height: 100vh;">
        <view v-for="item in items" :key="item.id">{{ item.text }}</view>
      </scroll-view>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    
    const scrollTop = ref(0);
    
    // 在需要时更新 scrollTop
    function scrollToTop() {
      scrollTop.value = 0;
    }
    </script>

3. scroll-viewscroll 事件不触发

  • 问题描述: 在 nvue 页面中,scroll-viewscroll 事件可能无法正常触发。

  • 解决方案:

    • 确保 scroll-viewscroll 事件绑定正确,并且事件处理函数在 setup 中定义。
    • 检查 scroll-view 的滚动区域是否足够大,以确保滚动事件能够触发。
    <template>
      <scroll-view @scroll="handleScroll" style="height: 100vh;">
        <view v-for="item in items" :key="item.id">{{ item.text }}</view>
      </scroll-view>
    </template>
    
    <script setup>
    function handleScroll(event) {
      console.log('Scroll event:', event);
    }
    </script>

4. scroll-viewnvue 中的性能问题

  • 问题描述: 在 nvue 页面中,scroll-view 可能会遇到性能问题,尤其是在渲染大量子元素时。

  • 解决方案:

    • 使用 nvuelist 组件代替 scroll-viewlist 组件在 nvue 中具有更好的性能表现。
    • 如果必须使用 scroll-view,考虑使用虚拟列表技术来优化性能。
    <template>
      <list>
        <cell v-for="item in items" :key="item.id">
          <text>{{ item.text }}</text>
        </cell>
      </list>
    </template>

5. scroll-viewnvue 中的样式问题

  • 问题描述: 在 nvue 页面中,scroll-view 的样式可能与 vue 页面中的表现不一致。

  • 解决方案:

    • nvue 使用的是原生渲染,样式支持与 vue 页面有所不同。确保你使用的是 nvue 支持的样式属性。
    • 使用 flex 布局来管理 scroll-view 及其子元素的布局。
    <template>
      <scroll-view style="flex: 1;">
        <view style="flex-direction: row;">
          <view v-for="item in items" :key="item.id">{{ item.text }}</view>
        </view>
      </scroll-view>
    </template>

6. scroll-viewnvue 中的兼容性问题

  • 问题描述: 在 nvue 页面中,scroll-view 可能在某些设备或平台上表现不一致。

  • 解决方案:

    • 确保你测试了 nvue 页面在目标平台和设备上的表现。
    • 如果遇到特定平台的兼容性问题,考虑使用平台特定的代码或条件编译来处理。
    <template>
      <scroll-view :style="{ height: platform === 'ios' ? '100vh' : '100%' }">
        <view v-for="item in items" :key="item.id">{{ item.text }}</view>
      </scroll-view>
    </template>
    
    <script setup>
    const platform = uni.getSystemInfoSync().platform;
    </script>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!