微信小程序自定义toast

【更新】2018-09-30

重写了组件，新增了一个样式，新增了一堆参数，原样式进行了部分调整，具体使用参照这里

下面那堆可以不用管了

demo目录

今天发现设计图上的toast弹框与小程序上的样式冲突，然后就写了个自定义的，使用了自定义组件的方式，设置好之后和官方的使用方式差不多。

以下是示例图（无视那个熊猫）

加载中

成功

警告

自定义图片

我自定义组件放在了/components/toast文件夹下

toast.wxml部分

<view class="toast" wx:if="{{param.title || param.icon}}">
  <view class="toast-block">
    <image class="{{param.icon}}" src="{{param.image?param.image:(param.icon!='none'?'./icons/'+(param.icon||'success')+'.png':'')}}" bindload="onImageLoad" style="{{param.image?'width:'+width+';height:'+height+';':''}}"></image>
    <view class="title {{param.icon}}">{{param.title}}</view>
  </view>
</view>

 

toast.wxss部分

 

.toast {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.toast-block {
  max-width: 540rpx;
  min-width: 200rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10rpx;
}

.toast-block>image {
  width: 60rpx;
  height: 60rpx;
  max-width: 540rpx;
  max-height: 540rpx;
  display: block;
}

.toast-block>image.loading {
  animation:circle 1s infinite linear;
}
@keyframes circle{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}
.toast-block>image.none{
  display: none;
}
.toast-block .title {
  margin-top: 20rpx;
  line-height: 29rpx;
  font-size: 30rpx;
  color: #fff;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.toast-block .none{
  margin-top: 0;
}

 

 

 

toast.js部分

 

 

 

Component({
  properties: {
    param:{
      type: Object,
      value: { icon: "", image: "", title: "", duration:1000 },
      observer: function (newVal, oldVal) {
        if (!this.isPlainObject(newVal)){
          let pages = getCurrentPages();
          let page = pages[pages.length - 1];
          var duration = typeof newVal == 'object' ? newVal.duration : 1000;
          setTimeout(() => {
            page.setData({
              toast: {}
            })
          }, duration);
        }
      }
    }
  },
  data: {},
  methods: {
    isPlainObject: function(obj){
      for (var name in obj) {
        return false;
      }
      return true;
    },
    onImageLoad:function(e){
      this.setData({
        width: e.detail.width * 2 > 540 ? 540:e.detail.width * 2 + 'rpx',
        height: e.detail.height * 2 > 540 ? 540:e.detail.height * 2 + 'rpx'
      })
    }
  }
})

 

以上是自定义组件的内容，里面包含了三张图片，懒得发，自己画一个就行，三个文件名字分别是success,warning,loading，格式为png。

 

 

icon图片大小固定为60rpx*60rpx。

image图片会自动判断大小，限制最大尺寸为540rpx*540rpx；

说说用法，

在app.js里插入

/**
   * toast模态弹窗
   * param.icon       string      弹框类型 success成功,warning警告,loading加载,none无图标,默认success
   * param.image      string      自定义图标
   * param.title      string      弹框内容
   * param.duration   int         弹窗显示时间，单位：毫秒，默认1秒
   */
  showToast:function(param){
    let pages = getCurrentPages();
    let page = pages[pages.length - 1];
    page.setData({
      toast:param
    })
  },

在需要使用的页面的json里加入

"usingComponents": {
    "toast": "/components/toast/toast"
  }

然后在对应页面wxml最底部或最顶部加入

<toast param="{{toast}}"></toast>

然后对应页面的js中需要弹窗提示信息的地方加上

 app.showToast({
      title:'测试',
      duration:2000
    });

 

完。