建议像这样做一个封装，可以使其和全局组件差不多 调用方式为：在该页面的任何地方使用(包括组件中，不过在组件中需要在组件componentDidMount生命周期后使用)
Taro.eventCenter.trigger('showLoading',msg)
Taro.eventCenter.trigger('hideLoading')
Taro.eventCenter.trigger('showSuccess',msg)
Taro.eventCenter.trigger('showError',msg)
import Taro, { Component } from '@tarojs/taro'
import { AtToast } from "taro-ui"
import { View } from '@tarojs/components'
export default class Index extends Component {
constructor(props) {
super(props)
this.showLoading = this.showLoading.bind(this)
this.hidModal = this.hidModal.bind(this)
this.showSuccess = this.showSuccess.bind(this)
this.showError = this.showError.bind(this)
this.state = {
isOpened: false,
type: 'success',
text: '',
timeVal: 2,
icon: ''
}
}
componentWillMount() {
Taro.eventCenter.on('showLoading', this.showLoading)
Taro.eventCenter.on('hideLoading', this.hidModal)
Taro.eventCenter.on('showSuccess', this.showSuccess)
Taro.eventCenter.on('showError', this.showError)
}
componentWillUnmount() {
if (this.state.type === 'loading') {
Taro.eventCenter.trigger('hideLoading')
}
Taro.eventCenter.off('showLoading', this.showLoading)
Taro.eventCenter.off('hideLoading', this.hidModal)
Taro.eventCenter.off('showSuccess', this.showSuccess)
Taro.eventCenter.off('showError', this.showError)
}
showLoading(text = '加载中...', timeVal = 60) {
this.setState({
isOpened: true,
type: 'loading',
text,
timeVal
})
}
showSuccess(text = '', timeVal = 1.5) {
this.setState({
isOpened: true,
type: 'success',
text,
timeVal
})
}
showError(text = '', timeVal = 1.5) {
this.setState({
isOpened: true,
type: 'error',
text,
timeVal
})
}
hidModal() {
this.setState({
isOpened: false,
})
}
render() {
const { isOpened, type, text, timeVal } = this.state
return (
<View>
<AtToast isOpened={isOpened} status={type} text={text} duration={timeVal * 1000} hasMask></AtToast>
</View>
)
}
}