微信小程序 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实现图片翻页效果
Dec 23 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
基于ionic实现下拉刷新功能
May 10 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
下载文件的点击数回填
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Javascript继承机制详解
2017/05/30 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Python break语句详解
2014/03/11 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Django实现网页分页功能
2019/10/31 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
道德模范先进事迹
2014/02/14 职场文书
出国签证在职证明
2014/09/20 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Jsonp劫持学习
2021/04/01 PHP