小程序模板网

微信小程序之自定义toast实例

作者:michael_ouyang,来自授权地址 
微信提供了一个toast的api wx.showToast() 
相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除。 
假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如下图: 

但是,当执行失败的时候,如下图: 
失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的。【捂脸】 
若是给老板看到这种效果,又是一顿臭骂,程序猿的委屈哭 

下面介绍一个自定义的toast 
效果: 

具体实现: 
wxml:

 

  1. <!--按钮-->
  2. <view style="{{isShowToast?'position:fixed;':''}}">
  3. <view class="btn" bindtap="clickBtn">button</view>
  4. </view>
  5.  
  6. <!--mask-->
  7. <view class="toast_mask" wx:if="{{isShowToast}}"></view>
  8. <!--以下为toast显示的内容-->
  9. <view class="toast_content_box" wx:if="{{isShowToast}}">
  10. <view class="toast_content">
  11. <view class="toast_content_text">
  12. {{toastText}}
  13. </view>
  14. </view>
  15. </view>

wxss:

 

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

js:

 

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23375.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询