So aktivieren Sie Pulldown in Uniapp

So aktivieren Sie Pulldown in uniapp: 1. Aktivieren Sie die Pulldown-Aktualisierung in „pages.json“ 2. Fügen Sie bei jedem Aufruf einen zusätzlichen Datensatz in das Array ein, mit Anweisungen wie „onReachBottom(){let that=this.. .}".

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Dell G3-Computer.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Uniapp implementiert Pull-Up-Laden und Pull-Down-Aktualisierung

Pull-Down-Aktualisierung bei PullDownRefresh

Sie müssen die Pull-Down-Aktualisierung auf Seiten aktivieren .json zuerst

//在pages.json中找到需要开启的页面. 在style中输入
"enablePullDownRefresh": true,

Pulldown aktivieren Nach dem Aktualisieren wird die Pulldown-Animation auf der Seite angezeigt, die dem Pulldown entspricht. Die Animation wird jedoch nicht automatisch geschlossen. Schließen Sie sie daher manuell.

onPullDownRefresh () {
    //刷新初始化数据
    this.size = 10
    this.current = 1 
    //调用获取数据的函数
    this.getData() 
    //关闭刷新动画
    setTimeout(function () {
        uni.stopPullDownRefresh() 
    }, 1000)
},

Pull-up Laden von onReachBottom

Fügen Sie bei jedem Aufruf einen zusätzlichen Datensatz in das Array ein

const SIZE = 10
data(){
return {
size: 10,
current: 1
}
}
//上拉加载函数
onReachBottom(){
    let that = this
    //每次上拉加载的数据比上一次多十个
    that.size += SIZE
    setTimeout(()=>{
        that.getData()
    },1000)
}

Das obige ist der detaillierte Inhalt vonSo aktivieren Sie Pulldown in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!