uniapp上拉刷新下拉加载
方法一：
z-paging 的组件库：
show-loading-more-no-more-view="false"
- 该属性控制是否显示 "加载更多" 或 "没有更多" 的提示。如果设为
false，则不会显示这些提示。如果设为true，当数据加载完毕后会显示 "没有更多" 的提示。 - 默认情况下，分页组件会显示这两个状态，你可以根据需求设置为
false。
fixed="true"
- 该属性用于设置分页组件是否固定在页面的底部。如果设为
true，分页组件会固定在页面底部，不会随着页面滚动而移动。
@onRefresh="onRefresh"
- 这是
z-paging提供的事件，表示触发了刷新操作。当用户下拉刷新时，会触发onRefresh方法。 - 在
onRefresh方法中，你通常需要重置数据并重新加载数据列表。
安装：npm install z-paging
<template>
<view class="home-page">
<z-paging ref="paging" v-model="dataList" :show-loading-more-no-more-view="false" :fixed="true"
@onRefresh="onRefresh" bg-color="#ffffff" @query="queryList">
<view class="top-box" slot="top">
<custom :mode="1" title=" " background="transparent" :hiddenBtn="true"></custom>
</view>
<view class="list-box">
<!-- 上拉刷新下拉加载的数据 -->
<list-item v-for="(item, index) in dataList" :key="index" :info="item"></list-item>
</view>
<qq-footer slot="empty" :show="true" :emptyText="'暂无数据'"></qq-footer>
</z-paging>
</view>
</template>
<script>
export default {
name: 'homepage',
data() {
return {
dataList: [],
};
},
onShow() {
this.$store.dispatch('refresh')
},
methods: {
onRefresh() {
// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
setTimeout(() => {
// 1.5秒之后停止刷新动画
// this.$refs.paging.complete();
// this.$refs.paging.reload()
}, 1500)
},
queryList(pageNumber, pageSize) {
this.request({
url: '/url/url',
method: 'get',
data: {
pageNumber,
pageSize
}
}).then(res => {
if (res.status === 200) {
this.$refs.paging.complete(res.data);
}
}).catch(err => {
this.$refs.paging.complete(false);
})
},
}
}
</script>
方法二：
<template>
<view>
<indexNoteList :is_null="is_null" :addEventHandel="false" @refreshNoteList="refreshNoteList" showIsOpen
:list="noteList">
</indexNoteList>
</view>
</template>
<script>
import NOTE from "@/utils/note.js";
export default {
data() {
return {
is_null: false,// 是否没有更多数据
noteList: [],
page: 1,
pageSize: 10,
}
},
onLoad() {
this.getNoteListnew(this.page); //动态列表
},
//上拉触底
onReachBottom() {
this.getNoteListnew(this.page);
},
//监听用户下拉刷新
onPullDownRefresh() {
setTimeout(() => {
uni.stopPullDownRefresh();
}, 200);
this.init();
},
methods: {
init() {
this.setData({
page: 1,// 重置为第一页
noteList: [],// 清空列表
is_null: false,// 重置没有更多数据的状态
})
this.getNoteListnew();// 重新加载数据
},
getNoteListnew(page = 1) {
if (this.is_null) return // 如果没有更多数据，就停止请求
if (page !== 1 && this.is_null == true) return;// 如果不是第一页且没有更多数据，则停止请求
let formData = {
pageNumber: page,
pageSize: this.pageSize,
}
this.request({
url: '/url/url',
data: formData,
method: 'get'
}).then(res => {
if (!this.rsuccess(res)) return;
let arr = NOTE.filter(res.data, page == 1 ? [] : this.noteList); // 过滤数据
arr = NOTE.handelList(arr);// 处理数据
// 如果是第一页，直接替换数据；否则，追加数据
if (page == 1) {
this.noteList = arr;
} else {
this.noteList = this.noteList.concat(arr);
}
// 判断是否还有更多数据
if (arr.length < this.pageSize) {
this.is_null = true;
} else {
this.is_null = false;
}
this.page = page + 1; // 更新当前页码
});
},
}
}
</script>
@/utils/note.js
//处理图片，时间等
export function handelList(arr = []) {
arr.forEach(v => {
v = handelNote(v);
})
return arr;
}
//查重
export function filter(arr = [], oldArr = []) {
let ids = oldArr.map(v => v.id);
return arr.filter(v => !ids.includes(v.id));
}
//处理单条数据
export function handelNote(info) {
//处理图片
if (String(info.noteImg).trim()) {
info.noteImg = String(info.noteImg).trim().split(',').filter(v => v);
} else {
info.noteImg = [];
}
if (String(info.tranNoteImgUrl).trim()) {
info.tranNoteImgUrl = String(info.tranNoteImgUrl).trim().split(',').filter(v => v);
} else {
info.tranNoteImgUrl = [];
}
//处理时间
if (!info.createTime) {
info.time = '未知';
} else {
info.time = getTimeStr(info.createTime);
}
return info;
}
//处理时间
export function getTimeStr(t) {
let NewTime = new Date().getTime();
if (NewTime - t < 1000 * 60 * 2) {
return '刚刚';
}
if (NewTime - t < 1000 * 60 * 6) {
return `${parseInt((NewTime-t)/60000)}分钟前`;
}
return dateFormat('mm-dd HH:MM', new Date(t));
}
//更新dom数组
export function refreshNoteList(E, page) {
if (E.type == 'update') {
page.noteList.some((v, i) => {
if (v.id == E.info.id) {
page.$set(page.noteList, i, JSON.parse(JSON.stringify(E.info)));
return true;
}
return false;
});
return;
}
if (E.type == 'delete') {
page.noteList.some((v, i) => {
if (v.id == E.info.id) {
page.noteList.splice(i, 1);
return true;
}
return false;
});
}
if (E.type == 'add') {
page.noteList.unshift(E.info);
}
}
export function dateFormat(fmt, date) {
let ret;
let opt = {
"Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length,
"0")))
};
};
return fmt;
}
export function getFormatText(v, unit = '万') {
if (!v) v = 0;
v = Number(v);
if (v < 10000) {
return v;
}
return `${Number(Number(v / 10000).toFixed(1))}${unit}`;
}
export default {
handelList,
filter,
handelNote,
refreshNoteList,
}原文地址：https://blog.csdn.net/weixin_58431406/article/details/143613927
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！