VUE下一页功能怎么写?这篇教程真的超简单!

吉云

今儿个咱来聊聊在Vue里头咋弄个“下一页”的功能。一开始我也没搞明白,琢磨半天,后来总算是弄出点门道来,赶紧记录下来,省得以后再走弯路,也给大伙儿分享分享。

我一开始是这样想的,你得知道现在是第几页,还有一页上要放几条数据,对?这俩参数得先弄明白。然后我就去翻Vue的文档,看有没有啥现成的法子,结果发现可以用axios或者其他的啥HTTP库去跟后端要数据。要的时候,得把当前页码和每页数量给带上,这样后端才知道给你啥数据。

我这一步是照着网上的例子做的,主要就是定义几个变量:

VUE下一页功能怎么写?这篇教程真的超简单!

  • list:用来放数据的,一开始是空的;
  • listLoading:这个是用来显示加载状态的,一开始设成true,表示正在加载;
  • totalPage:总共有多少页,我这儿默认先写个1;
  • currentPage:当前是第几页,一开始当然是第1页。

VUE下一页功能怎么写?这篇教程真的超简单!

我就在Vue组件里头写代码。用v-for把后端返回来的数据一条条渲染到页面上。这个v-for还挺好用的,能自动帮你遍历数据,省不少事儿。

数据有,还得有个按钮让人点“下一页”。我就在“下一页”按钮上加个点击事件。每次点这个按钮,就得干几件事儿:

  1. 把当前页码加1,表示要看下一页;
  2. 再用axios去后端要下一页的数据;
  3. 拿到数据后,更新页面上的数据。
  4. VUE下一页功能怎么写?这篇教程真的超简单!

这里我还发现一个坑,就是得在每次请求数据之前把listLoading设成true,表示又开始加载,然后在数据回来之后再设成false,表示加载完。要不那个加载状态就不对。

我发现这么做还不够,总得有个数告诉用户总共有多少页,还有当前是第几页?我就又加俩变量,一个用来显示总页数,一个用来显示当前页数。这些都在每次请求完数据之后更新一下。

这么一通折腾,总算是把“下一页”的功能给搞定。虽然过程有点曲折,但结果还是好的。这回的经验告诉我,遇到问题还是得多动手试试,光看文档有时候是不够的。还得看看别人是怎么做的。好,今儿个就分享到这儿,希望对大伙儿有点帮助。

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。

目录[+]