uniapp上拉加载。下拉刷新（超详细-直接cv大法即可）

最新推荐文章于 2024-10-25 16:00:53 发布

Chen-Hui

最新推荐文章于 2024-10-25 16:00:53 发布

阅读量2.4w

点赞数 32

分类专栏： uniapp 文章标签： javascript 前端 uni-app

本文链接：https://blog.csdn.net/Chen__Hui/article/details/122497140

版权

uniapp 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

由于之前没怎么解过uniapp。看了一些文章感觉不是特别详细。空闲时间整理了一下。

当有这个需求的时候。第一步想到的是在pages.json配置开启下拉刷新官方文档在此：

https://uniapp.dcloud.io/api/README?id=%e4%b8%8b%e6%8b%89%e5%88%b7%e6%96%b0

只需要将这段代码加入配置即可 "enablePullDownRefresh": true

示例：

		{
			"path": "pages/index/index",
			"style": {
				"enablePullDownRefresh": true
			}
		},

这里就已经成功开启下拉刷新，与触底加载了，当然还需要相对应的事件去触发。接下来就介绍一下所需要的事件函数。

onReachBottom （上拉时到底部多少距离触发的事件）官方语言：页面滚动到底部的事件。可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

uni.startPullDownRefresh() （直接调用一次下拉事件）官方语言：开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

onPullDownRefresh （下拉后触发的事件）官方语言：处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

示例：

data函数中定义

			total:null, //总共多少条数据
            formData:{
                pageSize:10,  //每页10条数据
			    page:1,       //第几页
            }

定义加载数据方法

    getData(){

        // 这里是我封装的请求方法
        API.member(this.formData).then(res=>{

            //请求数据成功
		    if(res.data.code == 200){
                this.total = res.data.result.total
                //新数据push到列表中
			    const newlist = res.data.result.data
				this.list.push(...newlist)
			}else{
                 console.log('请求数据失败')		
			}
		})
    }

上拉到底时触发，onReachBottom函数跟生命周期同级

	onLoad() {
			
	},
    onReachBottom(){
		let  allTotal = this.formData.page * this.formData.pageSize
		    if(allTotal < this.total){
                //当前条数小于总条数 则增加请求页数
		        this.page ++;
				this.getData() //调用加载数据方法
		    }else{
		        // console.log('已加载全部数据')
		    }
	},

下拉刷新触发，onPullDownRefresh函数跟生命周期同级

  onPullDownRefresh () {
    this.list = []
    //调用获取数据方法
    this.getData()
    setTimeout(() => {
        //结束下拉刷新
      uni.stopPullDownRefresh ();
    }, 1000);
  },

当然也可以每次回到页面就调用下拉刷新(这里看各位需求啦)：

  onShow() { //没次回到页面都会调用下拉刷新
	  uni.startPullDownRefresh()
  },
  onLoad() { //页面最开始调用
	  uni.startPullDownRefresh()
  },

上拉加载下拉刷新就到这里啦！楼主第一次创作写的不好。键盘留情。

（彩蛋）

上拉时没有动画不够好看，看这里超简单的一个加载中动画。加载完毕提示！插件。

上连接：https://ext.dcloud.net.cn/plugin?id=29

文档连接：https://uniapp.dcloud.io/component/uniui/uni-load-more

使用方法：

data(){
    status: 'more',
}

<uni-load-more :status="status"></uni-load-more>

		onReachBottom() {
			let allTotal = this.page * this.pageSize;
			if (allTotal < this.total) {
                
				this.status = 'loading';  //加载中状态

				this.page++;
                this.getData()
			} else {

				this.status = 'noMore'; //加载完状态

			}
		},

此篇文章就到这里啦。