uniapp 数据加载动画

### 实现 UniApp 数据加载动画

在 UniApp 应用程序中实现数据加载动画可以提升用户体验，尤其是在处理较长时间的数据请求时。通过使用 `tui-loadmore` 和 `tui-nomore` 组件，可以在等待新数据加载期间显示友好的提示信息。

#### 使用 tui-loadmore 显示加载状态

为了实现在数据加载过程中显示加载动画的效果，可以利用 `tui-loadmore` 组件来指示正在获取更多信息：

<!-- 加载loading -->
<tui-loadmore v-if="isLoading" :visible="true" :index="3" type="primary"></tui-loadmore>

这里定义了一个布尔变量 `isLoading` 来控制加载条目的可见性[^3]。

#### 设置无更多数据提示

对于已经到达列表底部且没有额外内容可加载的情况，则应向用户提供清晰的信息反馈：

<!-- 没有更多了 -->
<tui-nomore v-else :visible="!hasMoreData" bgcolor="#f5f5f5">没有更多了</tui-nomore>

此部分逻辑依赖于另一个标志位 `hasMoreData` 判断是否存在剩余未加载项。

#### JavaScript 控制逻辑

配合上述模板结构，在 Vue 的 script 块内需相应地管理这两个标记的状态变化：

export default {
  data() {
    return {
      isLoading: false,
      hasMoreData: true,
      // ...其他属性...
    };
  },
  
  methods: {
    async fetchData(pageIndex) {
      this.isLoading = true;
      
      try {
        const response = await api.get(`/data?page=${pageIndex}`);
        
        if (response.data.length === 0 || pageIndex >= totalPages) {
          this.hasMoreData = false;
        }
        
        // 更新本地存储的数据集
        
      } catch(error){
        console.error('Failed to fetch new page of items', error);
      } finally {
        this.isLoading = false;
      }
    }
    
    // ...
  }
}

这段脚本展示了如何根据 API 请求的结果调整视图上的占位符组件以及何时停止尝试拉取新的分页记录。