Vue移动端下拉加载更多数据onload实现方法浅析
发布时间：2023-02-16 13:09:58 所属栏目：Java 来源：互联网
导读：思想：van-list组件负责UI层监测触底, 执行onload函数, page++, 请求下页数据, 和现在数据合并显示更多, 设置loading为false, 确保下次触底还能执行onLoad vant是一个可用于移动端的组件库，搭建页面框架，需要使用到vant组件，添加依赖yarn add vant@2.12.1
|
思想：van-list组件负责UI层监测触底, 执行onload函数, page++, 请求下页数据, 和现在数据合并显示更多, 设置loading为false, 确保下次触底还能执行onLoad vant是一个可用于移动端的组件库，搭建页面框架，需要使用到vant组件，添加依赖yarn add vant@2.12.15至vue2项目内，此处用到van-list组件。 vant中的组件van-list来动态渲染数据，下拉加载首先需要绑定变量loading(加载状态)、属性finished(是否全部加载完成)，finished-text全部加载完成显示的文字 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > 正常的遍历searchResult内数据 渲染至页面内容 </van-list> 数据：注意要有当前页页码page配合实现 data() { return { searchResult: [], //搜索到的总的数据，用此数组内数据来遍历展示 loading: false, //加载中 (状态) - 只有为false, 才能触底后自动触发onload方法 finished: false, // 未加载全部 (如果设置为true, 底部就不会再次执行onload, 代表全部加载完成) page: 1, // 当前搜索结果的页码 }; }, 以上为准备的数据， onload 下拉刷新加载更多数据 （触底后加载下一页数据） 思想： 1、监测页面触底执行onload事件 （onload事件:页面内所有元素包括图片等都加载完成后执行） 2、配合后台接口，传递下一页的标识 3、拿到下一页数据后追加到当前数组末尾即可 <script> export default { methods: { // 此为js代码，监听事件，发送异步操作的数据请求 async btn2() { this.loading = false // 优化bug，防止出现首次多加载一次的情况 this.finished = false // 加载未结束 this.page = 1 // 走完函数，就将当前页恢复至1，防止后面累加，导致点击别的筛选条件时无效 // 异步发送请求获取数据赋值给data内变量 const { data } = await getSearchResult({ keywords: this.value, // 此为接口需要的参数 limit: 20 }) this.searchResult = data.result.songs }, async onLoad() { // 触底事件(要加载下一页的数据), 内部会自动把loading改为true，为true后才会执行x this.page++ // 加载至底部就将页面值+1 const { data } = await getSearchResult({ keywords: this.value, limit: 20, offset: (this.page - 1) * 20 // 传参固定公式，页面偏移量即一页多少数据 }) if (data.result.songs === undefined) { // 下拉刷新后此次检索不到数据了，表示已经将所有数据加载完了 return (this.finished = true) // finished赋值为true，表示 不再去进行加载了，结束状态 } this.searchResult.push(...data.result.songs) // 将每次下拉刷新检索到的数据加入 展示的数据列表 this.loading = false // 切记，本次加载完更多数据后,一定要把loading改成false, 保证下一次还能触发onload方法 } } } </script> 第一次发送getSearchResult数据请求为加载第一页数据，限制获取数据数量limit为20条，第二次getSearchResult则是下拉到底，再去获取20条数据，再添加到第一次保存数据的数组里，这样就有40条数据同时渲染在了页面上，以后每下拉一次，就是此种操作，从请求里获取不到数据了，将finished赋值为true下拉加载事件就会停止 到此这篇关于Vue移动端下拉加载更多数据onload实现方法浅析的文章就介绍到这了,更多相关Vue下拉加载 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 您可能感兴趣的文章: vue 使用mescroll.js框架实现下拉加载和上拉刷新功能 Vue实现下拉加载更多 Vue记住滚动条和实现下拉加载的完美方法 vue实现下拉加载其实没那么复杂 如何封装了一个vue移动端下拉加载下一页数据的组件 vue实现ajax滚动下拉加载，同时具有loading效果(推荐) （编辑：十堰站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
