uniapp button loading
时间: 2025-05-01 11:35:15 浏览: 29
### 如何在 UniApp 中实现按钮加载状态
在 UniApp 的 `button` 组件中,可以通过设置 `loading` 属性来启用按钮的加载状态。当该属性被赋值为 `true` 时,按钮会显示加载动画并禁用点击功能[^1]。
以下是具体实现方式以及示例代码:
#### 使用 `loading` 属性
`loading` 是一个布尔类型的属性,默认值为 `false`。将其设为 `true` 后,按钮将进入加载状态,并展示默认的加载图标[^2]。
```html
<template>
<view class="container">
<!-- 加载中的按钮 -->
<button type="primary" :loading="isLoading">提交</button>
<!-- 切换加载状态的按钮 -->
<button type="default" @click="toggleLoading">{{ isLoading ? '停止加载' : '开始加载' }}</button>
</view>
</template>
<script>
export default {
data() {
return {
isLoading: false, // 控制加载状态的变量
};
},
methods: {
toggleLoading() {
this.isLoading = !this.isLoading; // 切换加载状态
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100vh;
}
</style>
```
上述代码展示了两个按钮的功能:
1. **第一个按钮**:通过绑定 `:loading="isLoading"` 动态控制其加载状态。
2. **第二个按钮**:用于切换 `isLoading` 变量的状态,从而动态开启或关闭第一个按钮的加载效果[^3]。
#### 自定义加载样式
如果需要自定义加载图标的外观,可以结合 CSS 或者使用插槽(slot)。不过需要注意的是,在某些情况下直接嵌套子组件可能会影响内置样式的正常工作,因此推荐优先调整外部样式。
---
### 注意事项
- 当按钮处于加载状态时,无法响应任何交互行为,这是为了防止重复提交或其他异常情况的发生。
- 如果项目中有全局主题或者特殊需求,则需额外注意统一管理加载动画的一致性。
---
阅读全文
相关推荐



















