当前位置：首页 > news >正文

uniapp上拉刷新下拉加载

news 2025/7/19 2:07:23

方法一：

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,}

查看全文

http://www.lryc.cn/news/480235.html