在微信项目中有应用过几个上拉加载更多的组件,但总会出现一些兼容性方面的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. UVA10940 - Throwing cards away II(找到规律)

    UVA10940 - Throwing cards away II(找规律) 题目链接 题目大意:桌上有n张牌,依照1-n的顺序从上到下,每次进行将第一张牌丢掉,然后把第二张放到这叠牌的最后.重复进行 ...

  2. React学习(3)——ref,key,PureComponent,bindActionCreator

    ref 如果在html里设置ref那么它就指向这个真实的DOM节点. 如果在组件里设置ref,那么它就指向这个组件实例的引用,和组件里面的this互等. 我们经常在表单input,select里使用, ...

  3. &lt;PC&gt;HP网络共享并创建一个热点问题

    郁闷了一年多 你不能使用本地连接的开放热点 网上说的网卡驱动程序,系统设置等.,我们解决不了 原本BIOS节能设置错误 导致在连续主动对自己的有线无线功能被禁用 该LAN\WLAN  Switchin ...

  4. SendMessage函数与MSDN系统预定义消息

    SendMessage function https://msdn.microsoft.com/en-us/library/windows/desktop/ms644950%28v=vs.85%29. ...

  5. Angular语法(三)——数据绑定

    绑定类型 绑定类型可以按照数据流的方向分为三类:从源到视图,从视图到源,以及双向序列 示例 <!-- Bind button disabled state to `isUnchanged` pr ...

  6. MVC 直接或间接继承自ActionResult的类型

    •ViewResult:使用View()可以指定一个页面,也可以指定传递的模型对象,如果没有指定参数则表示返回与Action同名的页面 •ContentResult:使用Content(string ...

  7. 基于树莓派的微型气象站设计与开发(Windows 10 IoT Core)

    前言 树莓派(Raspberry Pi,RPi)是专门为学生计算机编程教育而设计,只有信用卡大小的卡片式电脑,可以运行Linux或者Windows 10 IoT Core操作系统.本文将利用树莓派和U ...

  8. WPF获取控件内部的ScrollViewer,并控制ScrollViewer操作

    //获取内部  ScrollViewer方法 public static T FindVisualChild<T>(DependencyObject obj) where T : Depe ...

  9. Thinkphp模板开放给第三方编辑权限时,如何禁止模板使用php代码

    首先我要吐槽一个问题:为什么在博客园发布的文章总是被其他网站采集过去,而他们采集过去后,排名比博客园还好,比如这篇文章,我把标题复制到百度搜索,结果第一页的搜索结果全部都是采集我的,而我在博客园发布的 ...

  10. Win8 Metro(C#)数字图像处理--3.4图像信息熵计算

    原文:Win8 Metro(C#)数字图像处理--3.4图像信息熵计算 [函数代码] /// <summary> /// Entropy of one image. /// </su ...