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

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

实际效果图#

点击加载更多效果图

实现思路#

组件模板#

Copy
<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>

结合后端分页查询接口#

Copy
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组件显示的内容

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

监听查询参数的变化#

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

具体应用#

Copy
<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

posted @   沉淀的风  阅读(1096)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示
CONTENTS