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

  1. Vue——轻松实现vue底部点击加载更多

    前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...

  2. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  3. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  4. android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

    android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多

  5. ajax点击加载更多数据图片(预加载)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js点击加载更多可以增加几条数据的显示

      <div class="list"> <div class="one"> <div class="img" ...

  7. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  8. Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多

    一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...

  9. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

随机推荐

  1. WPF实用指南二:移除窗体的图标

    原文:WPF实用指南二:移除窗体的图标 WPF没有提供任何功能来移除窗体上的icon图标.一般的做法是设置一个空白的图标,如下图1: 这种做法在窗体边框与标题之间仍然会保留一片空白. 比较好的做法是使 ...

  2. Form submit

    方法1:使用form onsubmit标签 return XXX()方法 <!--onsubmit--> <form id="formid" name=" ...

  3. 计算机网络OSI参考模型与tcp/ip四层模型

    OSI参考模型--7层 1层物理层:主要定义物理设备标准,如网线的接口类型.光线的接口类型.各种传输介质的传输速率等.它的主要作用是传输比特流(就是由1.0转化为电流强弱来进行传输,到达目的地后在转化 ...

  4. SyncML是一平台无关的信息同步标准协议集

    SyncML (Synchronization Markup Language)是一平台无关的信息同步标准协议集.分为SyncML数据传输协议(SyncML-DS)和SyncML设备管理协议(Sync ...

  5. 【WPF】DPI对控件定位产生的影响

    原文:[WPF]DPI对控件定位产生的影响 需求 程序界面上是一个Window,当用户点击桌面上除此Window之外的任何地方,都要把这个window隐藏掉.程序有个托盘图标,点击托盘图标不能隐藏wi ...

  6. 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)(使用OpenSSL的命令行)

    之前没接触过证书加密的话,对证书相关的这些概念真是感觉挺棘手的,因为一下子来了一大堆新名词,看起来像是另一个领域的东西,而不是我们所熟悉的编程领域的那些东西,起码我个人感觉如此,且很长时间都没怎么搞懂 ...

  7. [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口

    原文:[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 周银辉 现象: 大家可以试试下面这个很有趣但会带来Defect的现象:当我 ...

  8. delphi 操作xml示例(DelphiBBS)

    自:http://www.delphibbs.com/keylife/iblog_show.asp?xid=20713 ======================================== ...

  9. js 跨域访问 获取验证码图片 获取header 自定义属性

    1.net core web api 后端 /// <summary> /// 图形验证码 /// </summary> [HttpGet] public IActionRes ...

  10. Android 命令设置获取、IP地址、网关、dns

    设置ip root@android:/ # ifconfig eth0 192.168.0.173 netmask 255.255.255.0 ifconfig eth0 192.168.0.173 ...