uniapp - pull-up loads more adding throttle to avoid multiple requests

↓Three different states as shown in the picture. (Using uniapp’s uni-load-more)

first step

First, configure the page.json configuration file in the project root directory and configure the pull-up bottoming distance on the current page.

{
         "path": "goods_list/goods_list",
         "style": {
           "onReachBottomDistance": 150
         }
       },

 Step 2

<uni-load-more :status="status" :content-text="contentText" />

  The third step, configure in data↓

		data() {
			return {
				list: [],
				page: 1,
				pageSize: 10,
				total: 0,
				isloading: false,
				status:'loading',
				contentText: {
					contentdown: '上拉查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},

The fourth step, onS initializes data

		onShow() {
			this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            this.page = 1
            this.list = []
			this.loadData()
			

		},

Step 5, methods

		methods: {
			onReachBottom() {
				if (this.status == 'noMore') return
				if (this.isloading) return //如果isloading 是正在请求接口中那么 直接return
				// 让页码值自增+1
				this.page++
				this.loadData()
			},
			loadData() {
				this.isloading = true
				this.status = 'loading' //显示加载中
				setTimeout(() => {
					this.total = 6 //重新给total赋值
					this.list.push(1)
					if (this.page * this.pageSize >= this.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
					this.isloading = false
				}, 1000)
			}
		}

Guess you like

Origin blog.csdn.net/lanbaiyans/article/details/130575062