uniapp圆形加载

uniapp 圆形加载的实现方法

在uniapp中实现圆形加载效果，可以通过多种方式实现，以下是几种常见的方法：

使用uni-ui的uni-load-more组件

uni-ui提供了内置的加载组件，可以快速实现圆形加载效果。在页面中引入组件后，直接使用即可：

<uni-load-more status="loading" :showIcon="true"></uni-load-more>

自定义CSS动画

通过CSS动画可以创建自定义的圆形加载效果：

<view class="loading-circle"></view>

.loading-circle {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

使用uView UI框架

如果项目中使用uView UI，可以使用其提供的加载组件：

<u-loading mode="circle"></u-loading>

使用第三方图标库

通过引入第三方图标库如uni-icons，也可以实现圆形加载：

<uni-icons type="spinner-cycle" size="30" color="#999" class="rotate"></uni-icons>

.rotate {
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

使用CSS变量控制样式

对于需要更多自定义的场景，可以使用CSS变量：

<view class="custom-loader" style="--size: 50px; --color: #42b983;"></view>

.custom-loader {
  width: var(--size);
  height: var(--size);
  border: calc(var(--size)/10) solid #f3f3f3;
  border-top: calc(var(--size)/10) solid var(--color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

注意事项

• 动画性能优化：考虑使用transform和opacity属性来实现动画，这些属性不会触发重排
• 兼容性处理：某些低版本Android设备可能需要添加-webkit-前缀
• 全局样式管理：建议将加载动画样式放在公共CSS文件中以便复用

以上方法可以根据项目需求灵活选择，uni-ui的组件方式最简单，CSS自定义方式最灵活。