vant3+ts DropdownMenu 下拉菜单，数据多能滚动加载

热忱学习

于 2022-06-09 14:19:09 发布

阅读量1k

点赞数

分类专栏： vue3+ts 文章标签： typescript vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_42180156/article/details/125201944

版权

本文介绍了如何在Vue.js项目中，结合Vant3和Typescript实现DropdownMenu下拉菜单，并在数据量较大时实现滚动加载功能。详细讲解了关键的js代码和业务需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求需要是这种效果

这个事件的js代码

let flag = ref(true)
function scrolling(e: any) {
    let scrollBottom =
        e.target.scrollHeight -
        e.target.scrollTop -
        e.target.clientHeight;
    if (scrollBottom < 40) {  //这个是防止列表一直加载
        if (flag.value) {
            getCenter()
            flag.value = false
            setTimeout(() => {
                flag.value = true

            }, 1000);
        }
    }
}
//打开下拉框的时候
function open() {
    nextTick(() => {
        let element = document.getElementById('aaa')
        if (element) {
            element.addEventListener('scroll', scrolling)

        }

    })
}
//获取转运中心
function getCenter() {

最低0.47元/天解锁文章