uniapp下拉刷新,上拉更新

参考:uni-app官网

1、pages.json在配置所需页面可以下拉加载enablePullDownRefresh:true

{
	"path": "banner/index/index",
	"style": {
			    "navigationBarTitleText": "XXXXX",
				"enablePullDownRefresh": true
			 }
},

 2、我声明了页面请求的条件变量

data(){
   return{
       		// 收到的
				listData: [],//信息list
				listAll: 0,//信息总数
				listPage: 1,//请求页数
				listLoading: false,//是否正在加载
   }
}

3、写在method里面的数据请求函数

receivedLetter() {
		// 停止刷新请求条件
	if (this.listData && this.listData.length !== 0 && this.listData.length >= this.listAll) {
			     uni.stopPullDownRefresh()
				 return
			  }

				this.listLoading = true//开始请求
				this.$api.getMyDetailData({
					biz_id: this.$store.state.user_biz_id,//参数根据业务需求
					ptype: "get",
					page: this.listPage,//重点是这个会变的请求页码
					limit: 10
				}).then(res => {
					console.log("请求", res)
					this.listLoading = false  //请求完成
					this.listData.push(...res.data) //追加数据
					uni.stopPullDownRefresh()  //停止刷新
					
				})
			},

4、在页面首次加载完的时候,进行自动进行下拉请求第一页数据

       mounted() {
			uni.startPullDownRefresh()    
       },
       // 下拉触底函数
		onReachBottom() {
			//加载中就不进行加载
			if (this.listLoading) {
					return
			} else {
                    //加载下一页	
                    this.receivedLetter()//第一次的时候listPage=1
					this.listPage++	
			}
		},
		// 监听下拉更新 (重新获取第一页信息)
		onPullDownRefresh() {
            //初始化信息
			this.listPage = 1
			this.listLoading = false
			this.listData = []
			this.listAll = 0
			this.receivedLetter()
		},

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值