vux loadmore + axios 实现点击加载更多

Posted 2022-03-23 xyb0226

在微信项目中有应用过几个上拉加载更多的组件，但总会出现一些兼容性方面的bug，需要各种补漏(注:组件都是基于iscroll实现的， iscroll原本就有些坑)。Vux也有提供Scroller组件实现上拉加载或下拉刷新，但官方已经不再维护该组件(未实际使用过，不知是否有坑)。所以这次我们采用更为简单的方式来实现加载更多数据效果，废话不多说，直接看效果图。

实际效果图

实现思路

组件模板

<template>
  <div>
    <div v-for="(item,idx) in tableData"
         :key="idx"
         class="box">
      <slot :item="item"></slot>
    </div>
    <load-more v-if="loading"
               tip="正在加载"></load-more>
    <load-more v-else
               :show-loading="false"
               @click.prevent.native="load"
               :tip="tipText"
               background-color="#fbf9fe"></load-more>
  </div>
</template>

结合后端分页查询接口

export default 
data () 
    const _this = this
    return 
      tableData: [], // 列表数据
      loading: false,
      isLoadMore: true,
      // 查询参数
      queryJson: (() => 
        const  params  = _this
        return params
      )(),
    
      pageIndex: 1, // 当前页
      total: 0 // 数据总条数
    
,
methods: 
    load () 
      if (!this.isLoadMore) 
        return
      
      this.fetch()
    ,
    fetch () 
      this.loading = true
      let  url, pageSize, pageIndex, sortName, sordName, listField, totalField,
        pageIndexField, pageSizeField, sortNameField, sordField  = this

      let params = Object.assign(, this.queryJson)

      // 分页参数
      params = Object.assign(params, 
        [pageIndexField]: pageIndex,
        [pageSizeField]: pageSize
      )
      // 排序参数
      params = Object.assign(params, 
        [sortNameField]: sortName,
        [sordField]: sordName
      )
      axios.get(url,  params ).then(response => 
        this.total = response[totalField] // 总数
        let result = response[listField] // 当次加载的数据

        // 是否还可以加载更多 此种逻辑设计存在缺陷,如果在浏览列表的同时,又增加了新的记录
        this.isLoadMore = result.length === pageSize
        this.pageIndex++
        for (let item of result) 
          this.tableData.push(item)
        
      ).catch(error => 
        console.error('获取数据失败 ', error)
      ).finally(() => 
        this.loading = false
      )
    
 
 

变更loadmore组件内容

判断isLoadMore(是否正在加载)的值,以及tableData(显示数据列表内容) 的长度来控制底部loadmore组件显示的内容

computed: 
    tipText () 
      // 暂无数据, 没有更多数据, 轻按加载更多
      if (!this.tableData || this.tableData.length === 0) 
        return '暂无数据'
      
      return this.isLoadMore ? '轻按加载更多' : '没有更多数据'
    
  ,

监听查询参数的变化

watch: 
    params: function (val) 
      this.queryJson = val
      this.pageIndex = 1
      this.tableData = []
      this.fetch()
    
  ,

具体应用

<template>
  <div>
    <group title='钱包明细'>
      <vloadmore v-bind="table">
        <template slot-scope=" item ">
          <cell-box>
            <!-- 具体每一行的布局 -->
          </cell-box>
        </template>
      </vloadmore>
    </group>
  </div>
</template>
<script>
import  Group, CellBox  from 'vux'
import  CsLoadMore  from '@/components'
export default 
  data () 
    return 
      table: 
        url: '/pms/wallet/getpagelist',
        pageSize: 3
      
    
  ,
  components: 
    Group,
    CellBox,
    vloadmore: CsLoadMore
  

</script>

源码

组件源码请查看https://github.com/yinboxie/BlogExampleDemo/tree/master/Vux