<div class="e" @scroll.prevent="scroll" >
<!-- 因为 scroll 事件会冒泡所以绑定在父元素 -->
<img src="G:\\1.png"/>
<img src="G:\\1.png"/>
<img src="G:\\1.png"/>
<img src="G:\\1.png"/>
<img src="G:\\1.png"/>
</div>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
setup() {
// 防抖
function debounce(fn:Function,wait:number) {
let timeoutID:any = null
let flag = true
return function (e:any) {
if (timeoutID != null&&flag) clearTimeout(timeoutID)
timeoutID = setTimeout(fn,wait,e,flag)
}
}
function scrollhandl(e:UIEvent,...flag:any[]){
let target = e.target as HTMLElement
// [Property 'scrollTop' does not exist on type 'EventTarget'.](https://gitter.im/Microsoft/TypeScript/archives/2016/01/23)
console.log(target.scrollTop);
console.log(flag);
}
const scroll = debounce(scrollhandl,1000)
return {scroll}
}
})
<script/>
类型
在运行后
这个 flag 是什么
是
function scrollhandle(e, ...flag)
中的剩余参数
组成的数组比如这样调用,
flag
的值就是一个数组:[1,2,3]