小程序 view wx:for 循环太多时，如何在循环结束执行某个事件？

Question

小程序 view wx:for 时，大概500个循环时， 页面load显示出来比较慢，怎么才能在渲染 wx:for完成最后一个循环时，定义给 事件，加给提示加载完成呢？？
一般从网络获取数据时，在返回success时可以加给个提示。但是数据返回后，下一步就是渲染 view 层的 wx:for ，往往慢的就是这个wx:for 因为循环要绑定许多东西，导致空白8秒，这8秒结束后，如何加个提示完成绑定完成。 或者执行某个绑定结束的自定义事件呢？？

Answer 1

该回答引用ChatGPT

请参考下面的解决方案，如果可行 ，还请点击，如果有问题 可以私信，感谢支持！

可以在渲染完成后通过 WXML 中的 data-bind 和 JavaScript 中的 wx:if 进行判断，从而实现在渲染完成时触发自定义事件，提示加载完成。

在 wx:for 渲染的最后一个元素的元素上绑定 data-bind 属性，并在其中进行判断，在渲染完成后可以判断是否为最后一个元素，从而触发自定义事件。

代码示例

<view wx:for="{{list}}" data-index="{{index}}">
  <!-- 数据 -->
</view>

js

Page({
  data: {
    list: [1, 2, 3, 4, ..., 500]
  },
  onLoad: function() {
    var that = this;
    this.setData({
      list: that.data.list
    }, function() {
      // wx:for 渲染完成后执行
      if (that.data.list.length == 500) {
        console.log("Load Complete");
        // 触发自定义事件
      }
    })
  }
})

这样就可以在 wx:for 渲染完成时触发自定义事件，提示加载完成。

//

在小程序中，可以通过在wx:for渲染数据的代码前后加入wx.showLoading和wx.hideLoading来实现加载提示。在wx:for绑定完数据后，可以触发自定义事件，通知其他页面或组件绑定已经完成。例如：

wx.showLoading({
  title: '加载中',
})

// 加载数据并绑定到wx:for

wx.hideLoading();

this.triggerEvent('bindDataEnd', {});

在接收该事件的页面或组件中，可以通过监听该事件来处理绑定完成后的逻辑。例如：

<template>
  <view>
    <!-- 监听自定义事件 -->
    <template is="xxx" data="{{...data}}" bind:bindDataEnd="bindDataEnd"></template>
  </view>
</template>

<script>
Page({
  bindDataEnd(e) {
    console.log('bindDataEnd');
  }
})
</script>