uniapp页面加载动画

在uniapp中，可以通过使用事件来控制页面加载动画的出现与隐藏。具体的实现方式是，在cs.vue组件中使用$emit方法触发一个名为aaa的事件，并传递参数0表示加载动画需要出现，当数据加载完毕后再次触发aaa事件，并传递参数1表示加载动画需要消失。在index.vue组件中引入cs.vue组件，并监听aaa事件，根据传递的参数来控制加载动画的显示与隐藏。具体的代码实现如下：

在cs.vue组件中：

if (res.intersectionRatio > 0) {
  this.$emit("aaa", 0); // 加载动画出现
  setTimeout(() => {
    this.a = 10;
    this.$emit("aaa", 1); // 加载动画消失
  }, 3000);
}

在index.vue组件中：

<template>
  <view class="container">
    <text>{{ appear === 0 ? '小球出现' : '小球消失' }}</text>{{ appear }}
    <view class="page-section">
      <scroll-view class="scroll-view" scroll-y>
        <cs :appear="appear" @aaa="(val) => appear=val"></cs>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import cs from './cs.vue';

export default {
  components: {
    cs
  },
  data() {
    return {
      appear: 1
    }
  },
}
</script>

通过以上代码，可以根据传递的appear参数来控制加载动画的显示与隐藏。当appear为0时，加载动画出现；当appear为1时，加载动画消失。