微信小程序 Toast自定义实例详解

 更新时间:2017年01月20日 17:04:57   投稿:lqh  
这篇文章主要介绍了微信小程序 Toast自定义实例详解的相关资料,需要的朋友可以参考下

微信小程序 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> 

效果图:

源码下载链接:http://xiazai.jb51.net/201701/yuanma/toastTestNew(jb51.net).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • 小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

    小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

    这篇文章主要介绍了小程序开发页面窗口定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JS面试之异步模拟超时重传机制详解

    JS面试之异步模拟超时重传机制详解

    这篇文章主要为大家介绍了JS面试之异步模拟超时重传机制详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法

    这篇文章主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下
    2017-06-06
  • JavaScript基本语法讲解

    JavaScript基本语法讲解

    这篇文章主要介绍了JavaScript的基本语法,包括注释和书写格式等基本知识,需要的朋友可以参考下
    2015-06-06
  • JS网页repaint与reflow 的区别及优化方式

    JS网页repaint与reflow 的区别及优化方式

    这篇文章主要为大家介绍了JS网页repaint与reflow 的区别及优化方式,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 微信小程序 location API实例详解

    微信小程序 location API实例详解

    这篇文章主要介绍了微信小程序 location API实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 MD5加密登录密码详解及实例代码

    微信小程序 MD5加密登录密码详解及实例代码

    这篇文章主要介绍了微信小程序 MD5加密登录密码详解及实例代码的相关资料,这里附有实例代码,需要的朋友可以参考下
    2017-01-01
  • JS数组去重详情

    JS数组去重详情

    这篇文章主要介绍JS数组去重,关于去重实际应用中,最常用的方法就是使用Set,也可以使用第三方库lodash来处理,下面一起来看看文章是怎么介绍JS数组去重的
    2021-11-11
  • JavaScript实现队列结构过程

    JavaScript实现队列结构过程

    这篇文章主要介绍了JavaScript实现队列结构的过程,队列即Queue,它是受限的线性表,先进先出,受限之处在于它只允许在表的前端进行删除操作,下面我们一起进入文章学习更加详细内容,需要的朋友也可以参考一下
    2021-12-12
  • 10分钟内讲解Npm脚本使用教程

    10分钟内讲解Npm脚本使用教程

    这篇文章主要为大家介绍了10分钟内讲解Npm脚本使用教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论