使用vueuse，实现横向滚动加载更多

横向无限滚动，在距离最右侧100px，开始加载数据

HTML

 <ul
    v-scroll="handleScrollRight"
    class="list"
    >
    <li
        v-for="(item, index) in data"
        :key="index"
        class="item"
        @click.stop="handleClickItem(index, item)"
    >
    </li>
</ul>

 

script

import { vScroll } from '@vueuse/components'
import { useThrottleFn, UseScrollReturn } from '@vueuse/core'

// 监听滑动到右侧后加载下一页，设置右侧偏移量100px
const handleScrollRight = [useThrottleFn((state: UseScrollReturn) => {
    if (state.arrivedState.right) {
        // 调用下一页数据获取
    }
}, 20), {
    offset: {
        right: 100
    }
}]