微信小程序 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 针对html DOM元素操作等经验累积
Mar 11 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 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
国内咖啡文化
2021/03/03 咖啡文化
FCKeditor添加自定义按钮
2008/03/27 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
JavaScript 特殊字符
2007/04/05 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
js制作提示框插件
2020/12/24 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python_LDA实现方法详解
2017/10/25 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
django框架forms组件用法实例详解
2019/12/10 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
python xlsxwriter模块的使用
2020/12/24 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
乡下人家教学反思
2014/02/01 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书