首页 > 建站教程 > 前端框架 >  uni-app自定义原生loading、自定义原生toast正文

uni-app自定义原生loading、自定义原生toast

uni-app自带的原生loading、原生toast,即uni.loading以及uni.showToast样式不好看且只能支持很少的自定义样式。如果用H5的方法自定义,虽然样式千变万化,非常好看,但是有两个缺点:
1、无法覆盖原生组件,如tabbar等
2、使用不方便,需要在需要使用的页面引入组件,然后再通过$refs等方法控制其隐藏显示等。

还好H5+提供了对应的原生方法,并支持非常多的自定义样式,下面是自定义的方法:
// 自定义加载   
const showLoading = (title="加载中...", modal=true) => {
    plus.nativeUI.showWaiting(title, {
        background: 'rgba(0, 0, 0, .8)',
        modal: modal,
        round: 5,
        padding: '1%',
        loading: {
            display: 'inline',
            height: '16px',
        },
        back: 'close'
    });
}

// 关闭加载框   
const closeLoading = () => {
    plus.nativeUI.closeWaiting();
}

// 自定义toast  
const showToast = (title="加载中...", duration=2000, align='center', verticalAlign='bottom') => {
    plus.nativeUI.toast('<font color="#ffffff">'+title+'</font>', {
        type: 'richtext',
        background: 'rgba(0, 0, 0, .8)',
        duration: duration,
        align: align,
        verticalAlign: verticalAlign,
    });
}

// 导出方法
export default {
    showLoading,
    closeLoading,
    showToast
};
更多自定义参数可以访问:https://www.html5plus.org/doc/zh_cn/webview.html

上面的方法放在tools.js中,然后在main.js中引入:
// 引入工具函数
import tools from "./common/tools";
Vue.prototype.$app = tools;
然后,在需要的地方,如公共ajax方法里,直接调用就可以了:
this.$app.showLoading()
this.$app.closeLoading()
this.$app.showToast()
非常的方便。