微信小程序 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 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
layer弹出层全屏及关闭方法
Aug 17 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
详解微信UnionID作用
2019/05/15 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
实例Python处理XML文件的方法
2015/08/31 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python更新所有已安装包的操作
2020/02/13 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
Order by的几种用法
2013/06/16 面试题
linux面试题参考答案(10)
2016/10/26 面试题
环境工程大学生自荐信
2013/10/21 职场文书
四年级语文教学反思
2014/02/05 职场文书
实习生岗位职责
2014/04/12 职场文书
2014年老干部工作总结
2014/11/21 职场文书
预备党员介绍人意见
2015/06/01 职场文书
二十年同学聚会感言
2015/07/30 职场文书
学校教学管理制度
2015/08/06 职场文书