快捷導(dǎo)航

微信小程序 Toast自定義實(shí)例詳解

更新時間：2017年01月20日 17:04:57 投稿：lqh

這篇文章主要介紹了微信小程序 Toast自定義實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下

微信小程序 Toast自定義實(shí)例詳解

實(shí)現(xiàn)類似于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("準(zhǔn)備執(zhí)行"); 
   timer = setTimeout(function () { 
    if(this.data.showModalStatus){ 
     this.hideModal(); 
     console.log("是否執(zhí)行"); 
   } 
  }.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"> 
 點(diǎn)擊 
</button> 
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> 
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> 
<!--對話框標(biāo)題--> 
 <view class="title-view"> 
  <view class="toast-view"> 
   要顯示的內(nèi)容 
  </view> 
   
 </view> 
</view>

效果圖：

源碼下載鏈接：http://xiazai.jb51.net/201701/yuanma/toastTestNew(jb51.net).rar

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

JS前端繪圖canvas模糊問題示例高清圖解
這篇文章主要為大家介紹了JS前端繪圖canvas模糊問題示例高清圖解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序數(shù)組（增，刪，改，查）等操作實(shí)例詳解
這篇文章主要介紹了微信小程序數(shù)組（增，刪，改，查）等操作實(shí)例詳解的相關(guān)資料,這里對小程序的數(shù)組進(jìn)行操作，簡單實(shí)例，需要的朋友可以參考下
2017-01-01
微信小程序監(jiān)聽手勢滑動切換頁面實(shí)例詳解
這篇文章主要介紹了微信小程序監(jiān)聽手勢滑動切換頁面實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06
Express框架兩個內(nèi)置中間件方法詳解
這篇文章主要為大家介紹了Express框架兩個內(nèi)置中間件方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Js原型鏈constructor prototype __proto__屬性實(shí)例詳解
這篇文章主要介紹了Js原型鏈constructor prototype __proto__屬性實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
window屬性onbeforeunload語法教程示例
這篇文章主要為大家介紹了window屬性onbeforeunload語法教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
JS前端中的設(shè)計模式和使用場景示例詳解
這篇文章主要為大家介紹了JS前端中的設(shè)計模式和使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
讓chatGPT教你如何使用taro創(chuàng)建mbox
這篇文章主要為大家介紹了讓chatGPT教你如何使用taro創(chuàng)建mbox實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JavaScript中isPrototypeOf函數(shù)
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)，isPrototypeOf() 是 Object函數(shù)（類）的下的一個方法，用于判斷當(dāng)前對象是否為另外一個對象的原型，如果是就返回 true，否則就返回 false，下面來看看詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11