小程序页面分批次加载（模拟懒加载）

最新推荐文章于 2024-08-09 14:38:42 发布

hangGe0111

最新推荐文章于 2024-08-09 14:38:42 发布

阅读量1.3k

点赞数

分类专栏：微信小程序文章标签：小程序 scroll 滚动发哦楼层加载数据

本文链接：https://blog.csdn.net/hangGe0111/article/details/100989439

版权

本文介绍了如何在小程序中实现页面分批次加载，以优化详情页大量数据的加载体验。通过监听滚动事件，当滚动到特定楼层时动态请求数据。详细讲解了思路、代码实现，并提到了在页面有展开收起功能时如何处理高度变化，建议将获取高度的操作写在数据渲染和展开收起事件中，而非每次滚动时计算。

摘要由CSDN通过智能技术生成

有些情况，例如在详情页，可能涉及的接口个数比较多，因为详情一般数据量比较庞大，如果部分开，一个接口请求，会导致请求时间比较长，用户体验会很差，所以此时就可把这个大接口分开，当页面滚动到某个楼层时再请求后边楼层的数据。

1.代码

1.wxml

<view style="width:100%;height:200rpx;">1</view>

<view style="width:100%;height:500rpx;">2</view>

<view style="width:100%;height:300rpx;">3</view>

<view class='wz1'></view>

<view style="width:100%;height:700rpx;">4</view>

<view class='wz2'></view>

<view style="width:100%;height:100rpx;">5</view>

<view class='wz3'></view>

<view style="width:100%;height:600rpx;">6</view>

<view style="width:100%;height:700rpx;">7</view>

1.2js