微信小程序自定义toast组件,提供比原生更好都表现。
- 简便的api调用方法(Toast.showLoading('msg...')、showSuccess()、showError()、showInfo())
- 提供背景遮罩属性
- 将loading和常用提示(success、error、warn、info)集合到同一个对象中
- 在页面的.json文件中添加组件
"usingComponents": {
"toast": "mp-toast-component"
}
- 在页面的.wxml文件中添加组件,并指定id(#必须#)
<!-- 页面.wxml -->
<toast id="we-toast"/>
- 在页面的.js文件中,导入上面的对象
<!-- 页面.js -->
import {
Toast,
} from 'mp-toast-component';
- 在代码中调用对象相应的方法
loading: function () {
Toast.showLoading('loading...');
},
success: function () {
Toast.showSuccess('success');
},
info: function () {
Toast.showInfo('this is a message');
},
warn: function () {
Toast.showWarn('warning warning');
},
error: function () {
Toast.showError("error: don't touch that button");
},
hide: function () {
Toast.hide();
},