Vue3横向滚动加载分页

原创

已于 2023-06-26 19:03:55 修改 · 831 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模

于 2023-06-26 16:39:15 首次发布

该代码示例展示了如何在Vue组件中使用TypeScript（TS）处理滚动事件，动态加载产品列表。当用户滚动到列表底部时，通过调用`nextPage`函数增加页面索引并获取更多数据。列表数据由`productList`服务提供，并使用`reactive`响应式状态管理。

效果

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>

<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 }