uni-app微信小程序上拉加载,下拉刷新

pages.json配置官网链接
onPullDownRefresh、onReachBottom函数跟生命周期同级

data() {
	return {
		orderList:[],
		total: null, //总共多少条数据
		page: 1,
		pageSize: 10,
	}
},
onLoad() {
	
},
mounted(){
	this.getInfo()
},
methods:{
	getInfo(){
		API.getListxxx().then(res => {
			const newlist = result.contents
			this.orderList.push(...newlist)
			this.total = result.totalCount
		})
	},
	//通过按钮点击触发下拉刷新
     fresh(){
          uni.startPullDownRefresh()
      }
},
//距离底部100px时(page中配置过),触发该事件页面滚动到底部的事件(不是scroll-view滚到底)
onReachBottom() {
	let allTotal = this.page * this.pageSize
	if (allTotal < this.total) {
		//当前条数小于总条数 则增加请求页数
		this.page++;
		this.getInfo() //调用加载数据方法
	} else {
		// console.log('已加载全部数据')
	}
},
//下拉后触发的事件
onPullDownRefresh() {
	this.orderList = []
	//调用获取数据方法
	this.getInfo()
	setTimeout(() => {
		//结束下拉刷新
		uni.stopPullDownRefresh();
	}, 1000);
},

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

//pages.json
{
	"path": "pages/index/index",
	"style": {
		"enablePullDownRefresh": true,
		"onReachBottomDistance":100
	}
},

也可以每次回到页面就调用下拉刷新(看需求定)

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

下拉刷新

自定义配置,在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh。
在这里插入图片描述
代码示例

{
    "pages": [
        {
            "path": "pages/index/index", //首页
            "style": {
                "app-plus": {
                    "pullToRefresh": {
                        "support": true,
                        "color": "#ff3333",
                        "style": "default",
						"offset":"260px",
						"height":"50%",
                        "contentdown": {
                            "caption": "下拉可刷新自定义文本"
                        },
                        "contentover": {
                            "caption": "释放可刷新自定义文本"
                        },
                        "contentrefresh": {
                            "caption": "正在刷新自定义文本"
                        }
                    }
                }
            }
        }
    ]
}

最近更新

  1. TCP协议是安全的吗?

    2024-03-12 07:04:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-12 07:04:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-12 07:04:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-12 07:04:02       18 阅读

热门阅读

  1. 【Python-Pandas】判断data.Frame中是否有NaN值

    2024-03-12 07:04:02       19 阅读
  2. 系统安全与网络攻击

    2024-03-12 07:04:02       20 阅读
  3. [python3] 工厂模式

    2024-03-12 07:04:02       19 阅读
  4. 公式排序算法实际运用

    2024-03-12 07:04:02       19 阅读
  5. 每天学习一个Linux命令之less

    2024-03-12 07:04:02       20 阅读
  6. 二、UML 类图与面向对象设计原则 之 UML概述

    2024-03-12 07:04:02       23 阅读
  7. excel 将缺失的单元个填充为NA

    2024-03-12 07:04:02       32 阅读
  8. [2023年]-hadoop面试真题(三)

    2024-03-12 07:04:02       18 阅读
  9. Unity 3D常用的数据结构

    2024-03-12 07:04:02       20 阅读
  10. 大语言模型提示工程简介

    2024-03-12 07:04:02       22 阅读