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()

非常的方便。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！