参考: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()  //停止刷新
					this.listAll=res.data.total
				})
			},

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()
		},

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐