+ -

uniapp如何实现懒加载

时间:2021-01-16

来源:互联网

在手机上看
手机扫描阅读

uniapp实现懒加载呢:可以使用【onReachBottom()】这个生命周期函数,让页面滚到到最底部时,进行加载操作,代码为【onReachBottom: function()】。下面PHP爱好者分享uniapp如何实现懒加载的方法,希望对大家有所帮助。

5fd04be2293a8612.png

uniapp如何实现懒加载

本教程操作环境:windows7系统、uni-app2.5.1版本、thinkpad t480电脑。

推荐(免费):uni-app开发教程

uniapp实现懒加载的方法:

在uni-app中,当我们需要让请求的数据进行懒加载时,可以使用onReachBottom()这个生命周期函数,让页面滚到到最底部时,进行加载操作。

这里的p是页码参数,每加载一次,per+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;

}

})

}

}‍