当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序自定义toast组件的方法详解【含动画】

微信小程序自定义toast组件的方法详解【含动画】

2019年07月21日  | 移动技术网IT编程  | 我要评论

本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考，具体如下：

怎么创建就不说了，前面一篇有

直接上代码

wxml

<!-- components/toast/toast.wxml -->
<view class="toast-box {{isshow? 'show':''}}" animation="{{animationdata}}">
  <view class="toast-content" >
    <view class="toast-img">
      <block wx:if="{{type==='success'}}">
        <image class="toast-icon" src="xxx" />
      </block>
      <block wx:if="{{type==='fail'}}">
        <image class="toast-icon" src="xxx" />
      </block>
    </view>
    <view class="toast-title">{{title}}</view>
  </view>
</view>

js

// components/toast/toast.js
component({
 properties: {
 },
 data: {
  type: 'fail',
  title: '你还没有勾选呢！',
  isshow: false,
  animationdata: ''
 },
 methods: {
  showtoast: function (data) {
   const self = this;
   if (this._showtimer) {
    cleartimeout(this._showtimer)
   }
   if (this._animationtimer) {
    cleartimeout(this._animationtimer)
   }
   // display需要先设置为block之后，才能执行动画
   this.setdata({
    title: data.title,
    type: data.type,
    isshow: true,
   });
   this._animationtimer = settimeout(() => {
    const animation = wx.createanimation({
     duration: 500,
     timingfunction: 'ease',
     delay: 0
    })
    animation.opacity(1).step();
    self.setdata({
     animationdata: animation.export(),
    })
   }, 50)
   this._showtimer = settimeout(function () {
    self.hidetoast();
    if (data.compelete && (typeof data.compelete === 'function')) {
     data.compelete()
    }
   }, 1200 || (50 + data.duration))
  },
  hidetoast: function () {
   if (this._hidetimer) {
    cleartimeout(this._hidetimer)
   }
   let animation = wx.createanimation({
    duration: 200,
    timingfunction: 'ease',
    delay: 0
   })
   animation.opacity(0).step();
   this.setdata({
    animationdata: animation.export(),
   })
   this._hidetimer = settimeout(() => {
    this.setdata({
     isshow: false,
    })
   }, 250)
  }
 }
})

json

{
 "component": true,
 "usingcomponents": {}
}

wxss

/* components/toast/toast.wxss */
.toast-box {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: 11;
 display: none;
 opacity: 0;
}
.show{
 display: block;
}
.toast-content {
 position: absolute;
 left: 50%;
 top: 35%;
 width: 350rpx;
 /*height: 250rpx;*/
 border-radius: 10rpx;
 box-sizing: bordre-box;
 transform: translate(-50%, -50%);
 background: rgba(0, 0, 0, .7);
}
.toast-img{
  width: 100%;
  height: 120rpx;
  padding-top: 15rpx;
  box-sizing: bordre-box;
  text-align: center;
}
.toast-icon{
  width: 100rpx;
  height: 100rpx;
}
.toast-title {
  width: 100%;
  padding:10rpx;
  line-height: 65rpx;
  color: white;
  text-align: center;
  font-size: 40rpx;
  box-sizing: border-box;
}

使用

例如，在中使用

在json中添加usecomponents属性

"usingcomponents": {
  "vas-prompt": "./components/toast/toast"
}

wxml

<vas-toast id='toast'></vas-toast>
<button bindtap="showtoast">点击弹出toast</button>

js

//在onready生命周期函数中，先获取prompt实例
onready:function(){
  this.prompt = this.selectcomponent("#toast");
},
showtoast:function(){
  this.toast.showtoast({
   type: 'success',
   title: '测试弹出消息',
   duration: 1000,
   compelete: function () {
    console.log('toast框隐藏之后，会调用该函数')
    //例如：跳转页面wx.navigateto({ url: 'xxx' });
   }
  })
},

效果

希望本文所述对大家微信小程序开发有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网