Vue3横向滚动加载分页

效果

 

template

<template>
  <div class="app">
    <div id="tablist"
         class="app__scroll"
         @scroll="listScroll">
      <div v-for="(item, i) in state.list"
           :key="i"
           class="app__item">
        <div class="app__name">{
  
  { item.name }}</div>
      </div>
    </div>
  </div>
</template>

ts

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { productList } from 'services'

const state = reactive({
  flag: true,
  isError: false,
  isEndPage: false,
  list: [],
  pageIndex: 1
})

onMounted(async () => {
  await getList()
})

// 获取列表
async function getList() {
  const { code, data }