小程序_TOAST 弹窗提示的几种设置方法

前端 评论

小程序内置 Toast 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1 
wx.showToast({
    title: 'nihao',         // 定义弹窗提示文本
    icon: 'succes',           // 定义弹窗图标显示样式 // succes loading    
    duration: 10000         // 提示延迟
})
// 2 
wx.showToast({              // 定义弹窗显示
    title: '加载中', 
    icon: 'loading', 
    duration: 10000         // 提示延迟
}) 
setTimeout(function(){ 
    wx.hideToast()          // 定义弹窗隐藏
},2000)

自定义 toast

toast 自定义 定时器设置弹窗显示时间

1
2
3
4
5
// .wxml
<!--点击button触发toast-->
<button type="primary" bindtap="listenerButton">点击显示toast</button>
<!--toast消息框显示3秒，并绑定事件-->
<toast hidden="{{hiddenToast}}" duration="3000" bindchange="toastHidden" >OK!</toast>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// .js
Page({
    data:{ // text:"这是一个页面"
        hiddenToast: true
    },
    listenerButton: function() {     // 监听button点击事件
        this.setData({
            hiddenToast: !this.data.hiddenToast
        })
    },
    toastHidden:function(){          // toast显示时间到时处理业务 
        this.setData({
            hiddenToast: true
        })
    }
})

toast 自定义 自设置结构定义图标显示

代码 .wxml 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// .wxml
<!--按钮-->  
<view style="{{isShowToast?'position:fixed;':''}}">  
    <view class="btn" bindtap="clickBtn">button</view>  
</view>  
<!--mask-->  
<view class="toast_mask" wx:if="{{isShowToast}}"></view>  
<!--以下为toast显示的内容-->  
<view class="toast_content_box" wx:if="{{isShowToast}}">  
    <view class="toast_content">  
        <view class="toast_content_text">  
          <view class="toast_pic" style="background:url('{{toastimg}}') no-repeat; background-size: contain; background-position: center">   
          <!-- 这里实现 toast_pic 的背景图 -->
          <!-- <image src='{{toastimg}}'></image> -->
          </view>
        {{toastText}}  
        </view>  
    </view>  
</view>

代码 wxss 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// .wxss
Page {  
    background: #fff;  
}  
/*按钮*/  
.btn {  
    font-size: 28rpx;  
    padding: 15rpx 30rpx;  
    width: 100rpx;  
    margin: 20rpx;  
    text-align: center;  
    border-radius: 10rpx;  
    border: 1px solid #000;  
}  
/*mask*/  
.toast_mask {  
    opacity: 0;  
    width: 100%;  
    height: 100%;  
    overflow: hidden;  
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 888;  
}  
/*toast*/  
.toast_content_box {  
    display: flex;  
    width: 100%;  
    height: 100%;  
    justify-content: center;  
    align-items: center;  
    position: fixed;  
    z-index: 999;  
}  
.toast_content {  
    width: 50%;  
    padding: 20rpx;  
    background: rgba(0, 0, 0, 0.5);  
    border-radius: 20rpx;  
}  
.toast_content_text {  
    height: 100%;  
    width: 100%;  
    color: #fff;  
    font-size: 28rpx;  
    text-align: center;  
} 
.toast_pic{                         // 设置 toast_pic 
  width: 100%;
  height: 500rpx;
}

代码 js 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// .js
Page({  
    data: {  
        //toast默认不显示  
        isShowToast: false   
    },  
    showToast: function () {  
        var _this = this;
        _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;  // toast时间  
        _this.setData({                // 显示toast  
            isShowToast: true,  
        });
        setTimeout(function () {       // 定时器关闭  
            _this.setData({  
                isShowToast: false  
            });  
        }, _this.data.count);  
    },  
    clickBtn: function () {            // 点击按钮 
        console.log("你点击了按钮")     //设置toast时间，toast内容  
        this.setData({  
            count: 1500,  
            toastText: 'Michael’s　Toast',
            toastimg: '/assets/wechat.png'  
        });  
        this.showToast();  
    }  
})

最终实现小程序弹窗提示。

Merlin Frontend Developer

一个前端。