在微信项目中有应用过几个上拉加载更多的组件，但总会出现一些兼容性方面的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 = thisreturn {tableData: [], // 列表数据loading: false,isLoadMore: true,// 查询参数queryJson: (() => {const { params } = _thisreturn params})(),pageIndex: 1, // 当前页total: 0 // 数据总条数}
},
methods: {load () {if (!this.isLoadMore) {return}this.fetch()},fetch () {this.loading = truelet { url, pageSize, pageIndex, sortName, sordName, listField, totalField,pageIndexField, pageSizeField, sortNameField, sordField } = thislet 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 === pageSizethis.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 = valthis.pageIndex = 1this.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