uniapp 上拉加载更多 和下拉刷新

uniapp 上拉加载更多 和下拉刷新

• 下拉刷新

配置pages.json, 然后在控制器中实现onPullDownRefresh方法

{
    "path": "pages/index/index",
    "style": {
        "app-plus": {
            "titleNView": false
        },
        "navigationBarTitleText": "",
        "enablePullDownRefresh": true // 开启下拉刷新
    }
},

• 上拉加载更多

<template>
	<view class="global">
    
        
		<view  v-for="item in tableData" :key="item.id">{{ item.name }}view>

		<view v-show="isLoadMore">
			<uni-load-more :status="loadStatus">uni-load-more>
		view>
	view>
template>
<script>
import {userList} from '../../http/api.js'
	export default {
		data() {
			return {
				tableData: [],
				page: 1,
				size: 10,
				isLoadMore: false,
				loadStatus: 'loading',
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
            // 下拉刷新
			onPullDownRefresh() {
				//重新触发获取数据方法，刷新接口
				this.tableData = []
				this.page = 1
				this.getList()

			},
            // 加载更多
			onReachBottom() {
				if (!this.isLoadMore) {
					this.isLoadMore = true
					this.page += 1
					this.getList()
				}
			},
			getList() {
				userList({
					page: this.page,
					size: this.size
				}).then(res => {
					//结束刷新
					uni.stopPullDownRefresh()
					const list = res.data.data.data
					if (list.length > 0) {
						this.tableData.push(...list)
						if (list.length < this.size) {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					}
				}).catch(err => {
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				})
			}
		}
	}
script>