在微信项目中有应用过几个上拉加载更多的组件，但总会出现一些兼容性方面的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

巴特西

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