微信小程序 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的loading效果实现代码
Nov 05 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
竞争性谈判邀请书
2014/02/06 职场文书
提拔干部考察材料
2014/05/26 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
拉贝日记观后感
2015/06/05 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
keepalived + nginx 实现高可用方案
2022/12/24 Servers