9***@qq.com
9***@qq.com
  • 发布:2022-07-21 11:15
  • 更新:2023-01-17 09:22
  • 阅读:2532

vue3中scroll-view滚动,内部函数会多次执行,vue2中没该问题

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

浏览器平台: Chrome

浏览器版本: 102

项目创建方式: CLI

CLI版本号: vite+ts+vue3

示例代码:
<template>  
  <view class="content">  
    <scroll-view scroll-y style="height: 350rpx">  
      <view class="item" v-for="(item, index) in dataMock">  
        <view class="item-title" :style="{ color: decideStatus() }">{{ item.name }}</view>  
      </view>  
    </scroll-view>  
  </view>  
</template>  

<script setup lang="ts">  
import { ref, reactive, computed } from 'vue';  
const dataMock: any = reactive([  
  { name: '名字' }, { name: '名字' }, { name: '名字' },  
  { name: '名字' }, { name: '名字' }, { name: '名字' },  
  { name: '名字' }, { name: '名字' },  
  { name: '名字' }, { name: '名字' }, { name: '名字' },  
  { name: '名字' }, { name: '名字' }, { name: '名字' },  
  { name: '名字' }, { name: '名字' },  
])  

const decideStatus =() => {   
    console.log('执行了')  
}  
</script>

操作步骤:

通过鼠标按住滚动,在控制台查看

预期结果:

页面初始化的时候执行一次,后面按住滚动不会多次执行

实际结果:

按住滚动反复多次执行

bug描述:

vue3中scroll-view滚动(鼠标滚轮滚动不会,鼠标按住滚动会,z-paging滚轮滚动会),内部函数会多次执行,怕性能有问题可能导致页面卡顿,vue2中没该问题,代码提取出来后如下

2022-07-21 11:15 负责人:无 分享
已邀请:

最佳回复

DCloud

DCloud

HBuilderX 3.6.16.20230109-alpha 已修复。

DCloud_UNI_WZF

DCloud_UNI_WZF

问题已确认,感谢反馈,已加分

DCloud_UNI_LXH

DCloud_UNI_LXH

后续修复

7***@qq.com

7***@qq.com

vue3 响应式没了

1***@qq.com

1***@qq.com

升级3.6.17版本后,scroll-view无法重新渲染了,还以为代码出现问题,排查了好久

要回复问题请先登录注册