uniapp中怎么全局使用LoadingPage 加载页
时间: 2023-12-22 11:05:14 浏览: 35
在uniapp中,可以通过uni-ui插件提供的Loading组件来实现全局的加载页。具体步骤如下:
1. 安装uni-ui插件,可以在HBuilderX中通过插件市场搜索uni-ui插件并安装。
2. 在App.vue文件中,添加全局Loading组件,代码如下:
```
<template>
<div>
<loading :show="showLoading"></loading>
<router-view></router-view>
</div>
</template>
<script>
import { Loading } from 'uni-ui'
export default {
components: {
Loading
},
data() {
return {
showLoading: false
}
},
mounted() {
this.$refs.loading.show()
setTimeout(() => {
this.$refs.loading.hide()
}, 3000)
}
}
</script>
```
3. 在需要显示Loading的页面或组件中,通过触发App.vue中定义的showLoading属性来显示Loading。例如:
```
<template>
<div>
<button @click="showLoading = true">显示Loading</button>
<button @click="showLoading = false">隐藏Loading</button>
</div>
</template>
<script>
export default {
data() {
return {
showLoading: false
}
}
}
</script>
```
在上面的示例中,通过点击按钮来触发showLoading属性,从而显示或隐藏全局Loading组件。
注意:全局Loading组件需要在App.vue中定义,并且需要通过子组件引用方式来使用。同时,在实际使用中,可以将全局Loading组件封装成一个混入(mixin),方便在多个组件中使用。