vux loadmore + axios 实现点击加载更多
在微信项目中有应用过几个上拉加载更多的组件,但总会出现一些兼容性方面的bug,需要各种补漏(注:组件都是基于iscroll实现的, iscroll原本就有些坑)。Vux也有提供Scroller组件实现上拉加载或下拉刷新,但官方已经不再维护该组件(未实际使用过,不知是否有坑)。所以这次我们采用更为简单的方式来实现加载更多数据效果,废话不多说,直接看效果图。
实际效果图#
点击加载更多效果图
实现思路#
组件模板#
Copy
结合后端分页查询接口#
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
源码#
组件源码请查看https://github.com/yinboxie/BlogExampleDemo/tree/master/Vux
作者:沉淀的风
出处:https://www.cnblogs.com/xyb0226/p/11146464.html
本站使用「署名 4.0 国际」创作共享协议,转载请在文章明显位置注明作者及出处。https://www.cnblogs.com/xyb0226/p/11146464.html