So implementieren Sie Lazy Loading in Uniapp

So implementieren Sie Lazy Loading in Uniapp: Sie können die Lebenszyklusfunktion [onReachBottom()] verwenden, um den Ladevorgang auszuführen, wenn die Seite nach unten scrollt. Der Code lautet [onReachBottom: function()].

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Thinkpad T480-Computer.

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

So implementieren Sie Lazy Loading in Uniapp:

In Uni-App können wir verwenden, wenn wir die angeforderten Daten verzögert laden müssen die onReachBottom() Lebenszyklusfunktion, um den Ladevorgang durchzuführen, wenn die Seite nach unten scrollt.

Das p hier ist der Seitenzahlparameter, jedes Mal, wenn es geladen wird, pro+1.

onLoad() {
// ajax请求
this.ajaxCode(this.per)
},
onReachBottom: function() {
// 下拉懒加载
++this.per;
uni.request({
url: 'https://www.zrzj.com/api/index/homePage',
method: 'get',
data: {
p: this.per
},
success: (res) => {
var next_data = res.data.result
// 加载新数组
this.products = this.products.concat(next_data)
}
})
},
methods: {
ajaxCode(per) {
uni.request({
url: 'https://www.zrzj.com/api/index/homePage',
method: 'get',
data: {
p: per
},
success: (res) => {
var _data = res.data.result
this.products = _data;
}
})
}
}

Verwandte kostenlose Lernempfehlungen: Programmiervideo

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