微信小程序实现懒加载追加数据方法

最新推荐文章于 2024-06-15 12:31:22 发布

原创

最新推荐文章于 2024-06-15 12:31:22 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

业务中我们常会遇到图片较多、或者数据较多的列表，一次渲染出来的话轻则渲染时间过长，重则可能直接罢工白屏，什么都渲染不出来，这个时候懒加载(只渲染视口中的数据)就很有必要了，然后每次再追加一定的条数。

思路：
进入页面初始化，首先 voteList 数组加载前10条（数量根据实际需要），然后每当用户下拉到底部后，触发onReachBottom函数，追加后10条到 voteList 数组中，循环直到全部加载完毕，显示“全部加载完毕”等提示语，此时无法下拉。

代码：
wxml：

<view class="vote_list flex-row">
    <view class="item" wx:for="{
    
    {voteList}}" wx:key="{
    
    {item.contentId}}">
      <view class="image" bindtap="popupVideo" data-item="{
    
    {item}}" >
        <image class="img" mode="widthFix" src="{
    
    {item.contentpic50}}"></image>
        <image class="play_icon" src=