uniapp如何实现懒加载

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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.resultthis.products = _data;}})}}
登录后复制

相关免费学习推荐:编程视频

以上就是uniapp如何实现懒加载的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:jquery怎么删除指定元素后的兄弟节点
下一篇:Vue中集成第三方库时的安全问题与风险追踪

发表评论

关闭广告
关闭广告