<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>
- 发布:2022-07-21 11:15
- 更新:2023-01-17 09:22
- 阅读:2532
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
浏览器平台: Chrome
浏览器版本: 102
项目创建方式: CLI
CLI版本号: vite+ts+vue3
示例代码:
操作步骤:
通过鼠标按住滚动,在控制台查看
通过鼠标按住滚动,在控制台查看
预期结果:
页面初始化的时候执行一次,后面按住滚动不会多次执行
页面初始化的时候执行一次,后面按住滚动不会多次执行
实际结果:
按住滚动反复多次执行
按住滚动反复多次执行
bug描述:
vue3中scroll-view滚动(鼠标滚轮滚动不会,鼠标按住滚动会,z-paging滚轮滚动会),内部函数会多次执行,怕性能有问题可能导致页面卡顿,vue2中没该问题,代码提取出来后如下
最佳回复