uniapp開啟上下拉的方法:1、在pages.json中開啟下拉刷新;2、在每次上拉時往數組中多扔一組數據,語句如“onReachBottom(){let that =this...}」。
本教學操作環境:windows7系統、uni-app2.5.1版本,Dell G3電腦。
推薦(免費):uni-app開發教學
uniapp實作上拉載入和下拉刷新
#下拉刷新onPullDownRefresh
需要先在pages.json中開啟下拉刷新
//在pages.json中找到需要开启的页面. 在style中输入 "enablePullDownRefresh": true,
開啟下拉刷新之後, 下拉對應的頁面就會出現下拉的動畫, 但是動畫不會自動關閉, 所以手動關閉
onPullDownRefresh () { //刷新初始化数据 this.size = 10 this.current = 1 //调用获取数据的函数 this.getData() //关闭刷新动画 setTimeout(function () { uni.stopPullDownRefresh() }, 1000) },
上拉載入onReachBottom
#每次上拉時往數組多丟一組資料
const SIZE = 10 data(){ return { size: 10, current: 1 } } //上拉加载函数 onReachBottom(){ let that = this //每次上拉加载的数据比上一次多十个 that.size += SIZE setTimeout(()=>{ that.getData() },1000) }
以上是uniapp如何開啟上下拉的詳細內容。更多資訊請關注PHP中文網其他相關文章!