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