uniapp-数据分页篇

标题1.配置上拉加载与下拉刷新

首先在app.json里面将enablePullDownRefresh和onReachBottom设置为true

 {
			"path": "pages/coinDetail/coinDetail",
			"style": {
				"enablePullDownRefresh": true,
				"onReachBottom": true
			}

		}

demo.vue

下拉触底时触发页码自增,然后将数据拼接在一起

<script>
	import {
		listing
	} from "../../api/api.js"
	export default {
		data() {
			return {
				InfoList: [],
				query: {
					pagesize: 10,
					pageindex: 1,
				}
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			//下拉的生命周期
			this.InfoList = []
			this.query.pageindex = 1
			this.getList()
			console.log('下拉刷新')

			setInterval(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			//阻止重复加载
			if (timer !== null) {
				clearTimeout(timer)
			}
			this.query.pageindex++
			let timer = setTimeout(() => this.getList(), 500)
		},
		methods: {
			getList() {
				listing('/api/Evector_UserInfo/erectoremoneyList', this.query).then(res => {
					console.log(res.data)
					if (res.data.ErrCode == 0) {
					    this.Message(res.data.ErrMsg, "success")
						this.InfoList = [...this.InfoList, ...res.data.Model.list]

					} else {
						 this.Message(res.data.ErrMsg, "error")
					}
				});
			}
		}
	}
</script>