今儿个咱来聊聊在Vue里头咋弄个“下一页”的功能。一开始我也没搞明白,琢磨半天,后来总算是弄出点门道来,赶紧记录下来,省得以后再走弯路,也给大伙儿分享分享。
我一开始是这样想的,你得知道现在是第几页,还有一页上要放几条数据,对?这俩参数得先弄明白。然后我就去翻Vue的文档,看有没有啥现成的法子,结果发现可以用axios或者其他的啥HTTP库去跟后端要数据。要的时候,得把当前页码和每页数量给带上,这样后端才知道给你啥数据。
我这一步是照着网上的例子做的,主要就是定义几个变量:
- list:用来放数据的,一开始是空的;
- listLoading:这个是用来显示加载状态的,一开始设成true,表示正在加载;
- totalPage:总共有多少页,我这儿默认先写个1;
- currentPage:当前是第几页,一开始当然是第1页。
我就在Vue组件里头写代码。用v-for把后端返回来的数据一条条渲染到页面上。这个v-for还挺好用的,能自动帮你遍历数据,省不少事儿。
数据有,还得有个按钮让人点“下一页”。我就在“下一页”按钮上加个点击事件。每次点这个按钮,就得干几件事儿:
- 把当前页码加1,表示要看下一页;
- 再用axios去后端要下一页的数据;
- 拿到数据后,更新页面上的数据。
这里我还发现一个坑,就是得在每次请求数据之前把listLoading设成true,表示又开始加载,然后在数据回来之后再设成false,表示加载完。要不那个加载状态就不对。
我发现这么做还不够,总得有个数告诉用户总共有多少页,还有当前是第几页?我就又加俩变量,一个用来显示总页数,一个用来显示当前页数。这些都在每次请求完数据之后更新一下。
这么一通折腾,总算是把“下一页”的功能给搞定。虽然过程有点曲折,但结果还是好的。这回的经验告诉我,遇到问题还是得多动手试试,光看文档有时候是不够的。还得看看别人是怎么做的。好,今儿个就分享到这儿,希望对大伙儿有点帮助。
免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。