vux loadmore + axios 实现点击加载更多
在微信项目中有应用过几个上拉加载更多的组件,但总会出现一些兼容性方面的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 实现点击加载更多的更多相关文章
- Vue——轻松实现vue底部点击加载更多
前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js点击加载更多可以增加几条数据的显示
<div class="list"> <div class="one"> <div class="img" ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多
一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
随机推荐
- RHEL 6和RHEL 7(CentOS 6和CentOS 7)恢复ROOT密码
RedHat 6恢复Root密码: 1.启动RedHat 6的时候在这个界面按任意键 2.出现如下界面,按 e 3.出现如下界面,选择第二个--kernel,然后再按 e 4.出现如下界面,输入 空格 ...
- redis SERVER INSTALL WINDOWS SERVICE
以管理 员身份 运行 CMD 命令,进入redis所在目录,并运行下 脚本redis-server --service-install redis.windows-service.conf --log ...
- 客户端技术的一点思考(数据存储用SQLite, XMPP通讯用Gloox, Web交互用LibCurl, 数据打包用Protocol Buffer, socket通讯用boost asio)
今天看到CSDN上这么一篇< 彻底放弃没落的MFC,对新人的忠告!>, 作为一个一直在Windows上搞客户端开发的C++程序员,几年前也有过类似的隐忧(参见 落伍的感觉), 现在却有一些 ...
- TestDisk 数据恢复 重建分区表恢复文件-恢复diskpart clean
source:http://www.cgsecurity.org/wiki/TestDisk_CN TestDisk 是一款开源软件,受GNU General Public License (GPL ...
- WPF 用代码调用dynamic resource动态更改背景 - CSDN博客
原文:WPF 用代码调用dynamic resource动态更改背景 - CSDN博客 一般dynamic resoource通常在XAML里调用,如下范例: <Button Click=&qu ...
- 给Delphi程序添加版本信息(EXE和Dll)
我们在用Delphi编译完程序,准备发布产品时,总希望随产品发布个性信息以标示产品的来源以及开发者等信息,就像windows的程序一样,使我们一看属性就知道他是微软的产品,这些在Delphi中是如何实 ...
- Linux参数调优
一.系统参数调优 打开文件 /etc/sysctl.conf ############ # 一般服务器调整 # ############ #最大连接数 net.core.somaxconn = 327 ...
- 错误代码: 0x800700b7 配置错误:定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节
操作环境:Windows 8.1 IIS8.5 VS2008 解决方法: 把应用程序池的.Net CLR 版本从4.0修改为2.0即可.如下图所示:
- lvcreate命令
lvcreate Command Examples on Linux : 1. The following command creates a logical volume 15 gigabytes ...
- Add-AppxProvisionedPackage
原文: Add-AppxProvisionedPackage Adds an app package (.appx) that will install for each new user to a ...