微信小程序 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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
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
php截取后台登陆密码的代码
2012/05/05 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
浅谈Python数据类型之间的转换
2016/06/08 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python目录和文件处理总结详解
2019/09/02 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
海量信息软件测试笔试题
2015/08/08 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
说明书怎么写
2014/05/06 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
护士求职自荐信
2015/03/25 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
Redis唯一ID生成器的实现
2022/07/07 Redis