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

Min_nna2024-03-12 16:04

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

javascript 复制代码

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事件。

javascript 复制代码

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

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

css 复制代码

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

下拉刷新

自定义配置，在 App 平台 下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh。

代码示例

css 复制代码

{
    "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": "正在刷新自定义文本"
                        }
                    }
                }
            }
        }
    ]
}