首頁 > web前端 > uni-app > uniapp如何開啟上下拉

uniapp如何開啟上下拉

藏色散人
發布: 2023-01-13 00:44:30
原創
3384 人瀏覽過

uniapp開啟上下拉的方法:1、在pages.json中開啟下拉刷新;2、在每次上拉時往數組中多扔一組數據,語句如“onReachBottom(){let that =this...}」。

uniapp如何開啟上下拉

本教學操作環境: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板