uniapp -上拉加载更多 添加节流阀避免多次请求

↓如图所示 三种不同状态。(用到了uniapp的uni-load-more)

第一步

首先在项目根目录page.json配置文件,当前的页面上配置上拉触底的距离

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

 第二步

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

  第三步,data中配置↓

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

第四步,onS初始化数据

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

		},

第五步,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)
			}
		}

猜你喜欢

转载自blog.csdn.net/lanbaiyans/article/details/130575062