脚本宝典收集整理的这篇文章主要介绍了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) => { 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; } }) } }
相关免费学习推荐:编程视频
以上就是uniapp如何实现懒加载的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的uniapp如何实现懒加载全部内容,希望文章能够帮你解决uniapp如何实现懒加载所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。