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


Posted in Javascript onMay 11, 2019

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

怎么创建就不说了,前面一篇有
微信小程序自定义prompt组件
直接上代码

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;
}

使用

例如,在index.html中使用

在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' });
   }
  })
},

效果

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

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

Javascript 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
javascript相关事件的几个概念
May 21 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
JS实现获取当前所在周的周六、周日示例分析
May 11 #Javascript
js核心基础之构造函数constructor用法实例分析
May 11 #Javascript
js核心基础之闭包的应用实例分析
May 11 #Javascript
vue下载excel的实现代码后台用post方法
May 10 #Javascript
微信小程序如何再次获取用户授权的方法
May 10 #Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 #Javascript
You might like
PHP 进程锁定问题分析研究
2009/11/24 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
js实现文字滚动效果
2016/03/03 Javascript
node跨域请求方法小结
2017/08/25 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
vue实现计算器功能
2020/02/22 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
法学专业自我鉴定
2014/02/05 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
廉政教育的心得体会
2014/09/01 职场文书
党员对照检查材料
2014/09/22 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
党支部综合考察意见
2015/06/01 职场文书
计算机实训心得体会
2016/01/14 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL