微信小程序自定义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 相关文章推荐
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python聊天室实例程序分享
2016/01/05 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
党支部创先争优活动总结
2014/08/28 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
面试感谢信范文
2015/01/22 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
公司奖励通知
2015/04/21 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android