亲宝软件园·资讯

展开

Vue移动端下拉加载更多数据onload实现方法浅析

搬砖IT员 人气:0

思想: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下拉加载事件就会停止

加载全部内容

相关教程
猜你喜欢
用户评论