小程序Toast通过事件提示自定义封装

封装需求：

由于小程序原生的提示把icon置为none时，最多两行展示，所以原生的方法没法使用了，故此封装

展示效果：

微信图片_20201127102833.jpg

下面实现自定义封装showToast提示（事件触发的），新建一个文件，建立一个组件。

Toast组件

toast.js

//animation.opacity(1).step() ，是通过opacity实现的，有一种动画效果，但是opacity有一个问题，会占页面空间，所以就使用了wx:if实现点击提示
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  },
  /** 
   * 私有数据,组件的初始数据 
   * 可用于模版渲染 
   */
  data: { // 弹窗显示控制 
    animationData: {},
    content: '提示内容',
    flag: false,//控制频繁操作
    show: false //控制展示
  },
  /**
   * 组件的方法列表 
   */
  methods: {
    /** 
     * 显示toast，定义动画
     */
    showToast(val) {
     //val,提示内容，我目前是动态的
      if (!this.data.flag && val) {
        this.setData({
          flag: true,
          show: true
        })
    /**
      *  let animation = wx.createAnimation({
      *  duration: 300,
      *    timingFunction: 'ease',
      *  })
      */
        // animation.opacity(1).step()
        this.setData({
       //   animationData: animation.export(),
          content: val
        })
        /**
         * 延时消失
         */
        setTimeout(() => {
          // animation.opacity(0).step()
          this.setData({
            //animationData: animation.export(),
            flag: false,
            show: false
          })
        }, 3000);
      }
    }
  }
})

toast.json

{
  "component": true
}

toast.wxml

<view class='wx-toast-box' animation="{{animationData}}" wx:if="{{show}}" >
    <view class='wx-toast-content'>
        <view class='wx-toast-toast'>{{ content }}</view>
    </view>
</view>

toast.wxss

.wx-toast-box {
  display: flex;
  width: 100%;
  justify-content: center;
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  margin: -25% 0 0 -50%;
  transition: all .3s;
  /* opacity: 0; */
}

.wx-toast-content {
  max-width: 80%;
  border-radius: 10rpx;
  padding: 20rpx;
  background: rgba(0, 0, 0, 0.6);
  /* word-wrap: break-word;
  word-break: break-all ; */
}
.wx-toast-toast {
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 28rpx;
}

使用

需要使用的页面,首先导入该文件
js

//Page Object
Page({
  data: {
    toast: ""
  },
 //点击事件
  showToast() {
    this.data.toast.showToast('Hello World~');
  },
  onLoad: function () {
  },
  onReady: function () {
    let toast = this.selectComponent("#toast");
    this.setData({
      toast: toast
    })
  },
  onShow: function () {
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () {
  },
  onShareAppMessage: function () {
  },
  onPageScroll: function () {
  },
  onTabItemTap: function (item) {
  }
});

<view>
    <button bindtap="showToast"></button>
</view>
<toast id="toast"></toast>

写的比较简陋，有好的封装可以给个链接，学习学习~