微信小程序实用组件：自定义弹框toast

小程序提供的提示弹框没有错误，警告的样式只有success和loading的,但是在实际需求中需要很多的这样的提示框，简单的做了一个，供大家参考 
效果预览：

代码介绍： 
alert.js：

1. function alertShow(that, iconType, alertlable) {
2. that.setData({
3. isAlert: true,
4. iconType: iconType,
5. alertLable: alertlable
6. });
7. setTimeout(function (e) {
8. that.setData({
9. isAlert: false
10. })
11. }, 1500)
12. }
13. module.exports = {
14. alertShow: alertShow
15. }

alert.wxml

1. <view wx:if="{{isAlert}}" style="position:fixed;margin: auto;left: 0;right: 0;top: 0;bottom: 0;width: 70%;height: 22%;background-color: rgba(66, 66, 66, 0.9); text-align: center;border-radius: 10rpx;z-index:9999">
2. <icon type="{{iconType}}" color="White" size="45" style="margin-top:5%;"></icon>
3. <view style="color:white; width:80%;margin-left:10%;margin-top:5%">
4. {{alertLable}}
5. </view>
6. </view>

使用界面：

1. //index.js
2. //获取应用实例
3. var Show = require("../../utils/alert/alert.js");
4. var app = getApp()
5. Page({
6. data: {
7. motto: 'Hello World',
8. userInfo: {}
9. },
10. //事件处理函数
11. bindViewTap: function () {
12. wx.navigateTo({
13. url: '../logs/logs'
14. })
15. },
16. warn: function (e) {
17. Show.alertShow(this, "warn", "这是警告框");
18. // 第一个参数是this，
19. // 第二个参数是提示框种类具体可参照icon的type
20. // 第三个参数是提示框的文字
21. },
22. info: function (e) {
23. Show.alertShow(this, "info", "这提示框");
24. },
25. success: function (e) {
26. Show.alertShow(this, "success", "这是成功框");
27. },
28. waiting: function (e) {
29. Show.alertShow(this, "waiting", "这是等待框");
30. },
31. onLoad: function () {
32. console.log('onLoad')
33. var that = this
34. //调用应用实例的方法获取全局数据
35. app.getUserInfo(function (userInfo) {
36. //更新数据
37. that.setData({
38. userInfo: userInfo
39. })
40. })
41. }
42. })

1.  
2. <!--index.wxml-->
3. <view class="container">
4. <view bindtap="bindViewTap" class="userinfo">
5. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
6. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
7. </view>
8. <view class="usermotto">
9. <view bindtap="warn" class="item">
10. 警告框
11. </view>
12. <view bindtap="success" class="item">
13. 提示框
14. </view>
15. <view bindtap="info" class="item">
16. 成功框
17. </view>
18. <view bindtap="waiting" class="item">
19. 等待框
20. </view>
21. </view>
22. </view>
23. <!--引入alert-->
24. <include src="../../utils/alert/alert.wxml" />