uniapp如何实现懒加载

百变鹏仔 4周前 (11-21) #uniapp

文章标签如何实现

uniapp实现懒加载的方法：可以使用【onreachbottom()】这个生命周期函数，让页面滚到到最底部时，进行加载操作，代码为【onreachbottom: function()】。

本教程操作环境：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) =&gt; {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) =&gt; {var _data = res.data.resultthis.products = _data;}})}}

uniapp如何实现懒加载

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项