当前位置：首页 > news >正文

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

news 2025/9/13 11:09:50

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.contentsthis.orderList.push(...newlist)this.total = result.totalCount})},//通过按钮点击触发下拉刷新fresh(){uni.startPullDownRefresh()}
},
//距离底部100px时（page中配置过），触发该事件页面滚动到底部的事件（不是scroll-view滚到底）
onReachBottom() {let allTotal = this.page * this.pageSizeif (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": "正在刷新自定义文本"}}}}}]
}