使用vue3对数据进行分页展示

2022-08-26 11:00:24 阅读：163 来源： 互联网

标签：777 const 分页展示 text list value vue3 page

要获取用户的滚动位置，可以在末尾添加一列空白节点。每当出现空白时意味着滑倒网页最底部，则进行渲染数据。可以使用getBoundingClientRect来判断是否在页面底部。

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

vue3示例代码如下：

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
const getList = () => {
  // code as before
}
const container = ref<HTMLElement>() // container element
const blank = ref<HTMLElement>() // blank element
const list = ref<any>([])
const page = ref(1)
const limit = 5
const maxPage = computed(() => Math.ceil(list.value.length / limit))
// List of real presentations
const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  if (page.value > maxPage.value) return
  const clientHeight = container.value?.clientHeight
  console.log(clientHeight)
  const blankTop = blank.value?.getBoundingClientRect().top
  if (clientHeight === blankTop) {
    // When the blank node appears in the viewport, the current page number is incremented by 1
    page.value++
    console.log(list.value.slice(0, page.value * limit))
  }
}
onMounted(async () => {
  const res = await getList()
  list.value = [
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'77dddd7'},
    {text:'77dddddddddddddd7'},
    {text:'7dddddddddddddddddddddddddddd77'},
    {text:'eeeeeeeee777'},
    {text:'777'},
    {text:'7www77'},
    {text:'7wee77'},
    {text:'77rrr7'},
    {text:'7tt77'},
    {text:'7yy77'},
    {text:'7uu77'},
    {text:'7ii77'},
    {text:'75577'},
    {text:'777'},
    {text:'7rrrr77'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
    {text:'777'},
  ]
})
</script>

<template>
  <div id="container" @scroll="handleScroll" ref="container">
    <div class="sunshine" v-for="(item) in showList" :key="item.tid">
      <img :src="item.src" />
      <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</template>

<style>
#container {
  height: 100px;
  overflow-y: scroll;
}
</style>

标签：777,const,分页,展示,text,list,value,vue3,page
来源： https://www.cnblogs.com/chailuG/p/16626860.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用vue3对数据进行分页展示