微信小程序 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 相关文章推荐
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
vue3使用vue-router的完整步骤记录
Jun 20 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
使用php实现截取指定长度
2013/08/06 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
文本域中换行符的替换示例
2014/03/04 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Python最小二乘法矩阵
2019/01/02 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
中科前程Java笔试题
2016/11/20 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
大一新生学期自我评价
2014/04/09 职场文书
护林防火标语
2014/06/27 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
初中家长评语大全
2014/12/26 职场文书
小学班主任自我评价
2015/03/11 职场文书
高三生物教学反思
2016/02/22 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS