微信小程序 Toast自定义实例详解


Posted in Javascript onJanuary 20, 2017

微信小程序 Toast自定义实例详解

实现类似于Android的Toast提示 

index.js:

var timer; 
var inputinfo = ""; 
var app = getApp() 
Page({ 
 data: { 
  animationData:"", 
  showModalStatus:false 
 }, 
  
 onLoad: function () { 
   
 }, 
 showModal: function () { 
  // 显示遮罩层 
  var animation = wx.createAnimation({ 
   duration: 200, 
   timingFunction: "linear", 
   delay: 0 
  }) 
  this.animation = animation 
  animation.translateY(200).step() 
  this.setData({ 
   animationData: animation.export(), 
   showModalStatus: true 
  }) 
  setTimeout(function () { 
   animation.translateY(0).step() 
   this.setData({ 
    animationData: animation.export() 
   }) 
  }.bind(this), 200) 
  console.log("准备执行"); 
   timer = setTimeout(function () { 
    if(this.data.showModalStatus){ 
     this.hideModal(); 
     console.log("是否执行"); 
   } 
  }.bind(this), 3000) 
 }, 
 clickbtn:function(){ 
  if(this.data.showModalStatus){ 
   this.hideModal(); 
  }else{ 
   this.showModal(); 
  } 
 }, 
 hideModal: function () { 
  if(timer != null){ 
   clearTimeout(timer); 
   timer = null; 
  } 
  // 隐藏遮罩层 
  var animation = wx.createAnimation({ 
   duration: 200, 
   timingFunction: "linear", 
   delay: 0 
  }) 
  this.animation = animation 
  animation.translateY(200).step() 
  this.setData({ 
   animationData: animation.export(), 
  }) 
  setTimeout(function () { 
   animation.translateY(0).step() 
   this.setData({ 
    animationData: animation.export(), 
    showModalStatus: false 
   }) 
  }.bind(this), 200) 
 }, 
})

index.wxml:

<button type="default" bindtap="clickbtn"> 
 点击 
</button> 
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> 
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> 
<!--对话框标题--> 
 <view class="title-view"> 
  <view class="toast-view"> 
   要显示的内容 
  </view> 
   
 </view> 
</view>

效果图:

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JS字符串和数组如何实现相互转化
Jul 02 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
JavaScript判断浏览器及其版本信息
Jan 20 #Javascript
JS中传递参数的几种不同方法比较
Jan 20 #Javascript
JS出现失效的情况总结
Jan 20 #Javascript
JSON 数据详解及实例代码分析
Jan 20 #Javascript
Angular ui.bootstrap.pagination分页
Jan 20 #Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 #Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 #Javascript
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php微信开发之谷歌测距
2018/06/14 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
javascript中Object使用详解
2015/01/26 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
利用JS实现数字增长
2016/07/28 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
个人自我鉴定
2013/11/07 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
职务任命书范本
2014/06/05 职场文书
教师先进个人材料
2014/12/17 职场文书
小学教师见习总结
2015/06/23 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL