欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序自定義toast實(shí)現(xiàn)方法詳解【附demo源碼下載】

 更新時(shí)間：2017年11月28日 11:19:59   作者：大灰狼的小綿羊哥哥  
這篇文章主要介紹了微信小程序自定義toast實(shí)現(xiàn)方法,簡(jiǎn)單描述了微信小程序自帶toast使用方法,并結(jié)合實(shí)例形式分析了自定義toast的定義與使用方法,需要的朋友可以參考下

本文實(shí)例講述了微信小程序自定義toast實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

一、微信官方默認(rèn)toast

toast最常見(jiàn)了，幾乎每個(gè)App都有這樣的特效，先看下小程序自帶的toast效果，立馬想死的心都有了~~

微信自帶toast的效果：

js文件：

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

用法超級(jí)簡(jiǎn)單，但官方小程序有幾個(gè)問(wèn)題：

只能顯示success、loading兩種icon

且icon不可去除

持續(xù)時(shí)間最大10秒

二、自定義toast

我們最常見(jiàn)的toast是偏底部，而且高度是比較小的那種~~

先看效果：

看似簡(jiǎn)單，實(shí)現(xiàn)起來(lái)相當(dāng)不簡(jiǎn)單，如何實(shí)現(xiàn)：

1）建立一個(gè)公共的toast的template模板文件，因?yàn)槊總€(gè)頁(yè)面都需要用到toast

<!-- wetoast.wxml -->
<template name="wetoast">
 <view class="wetoast {{reveal ? 'wetoast_show' : ''}}">
  <view class="wetoast__mask"></view>
  <view class="wetoast__bd {{position}}" animation="{{animationData}}">
   <block wx:if="{{title}}">
    <view class="wetoast__bd__title {{titleClassName || ''}}">{{title}}</view>
   </block>
  </view>
 </view>
</template>

2）JS主要有以下用法

核心代碼：

let pages = getCurrentPages();
let curPage = pages[pages.length - 1];

這段代碼是核心，getCurrentPages().length - 1 表示可以獲得當(dāng)前頁(yè)面的page，只有獲得了page，才能通過(guò)page.setData把當(dāng)前頁(yè)面的數(shù)據(jù)綁定到toast上面。

核心代碼：

let animation = wx.createAnimation();
animation.opacity(1).step();

這段代碼是toast消失的時(shí)候有一個(gè)緩慢的動(dòng)畫(huà)效果。

附：完整demo實(shí)例代碼點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

相關(guān)文章

  • 禁止IE用右鍵的JS代碼

    禁止IE用右鍵的JS代碼

    這篇文章主要介紹了禁止IE用右鍵的JS代碼，有需要的朋友可以參考一下
    2013-12-12
  • 使用Web?Component實(shí)現(xiàn)防篡改水印

    使用Web?Component實(shí)現(xiàn)防篡改水印

    Web?Component內(nèi)部有鉤子天然支持被篡改時(shí)被觸發(fā),用來(lái)防篡改非常方便,所以本文就將使用Web?Component實(shí)現(xiàn)防篡改水印,感興趣的小伙伴可以了解下
    2023-12-12
  • 多瀏覽器兼容的動(dòng)態(tài)加載 JavaScript 與 CSS

    多瀏覽器兼容的動(dòng)態(tài)加載 JavaScript 與 CSS

    Omar AL Zabir這位MVP總是喜歡搞些稀奇古怪同時(shí)又很實(shí)用的小東西，并且還十分值得參考。最近他就做了一個(gè)叫做ensure的小工具用于動(dòng)態(tài)加載JavaScript、CSS與HTML，而且IE、Firefox、Opera、Safari都支持了，那么我們就來(lái)看看ensure是如何做到動(dòng)態(tài)加載JavaScript與CSS的。
    2008-09-09
  • Bootstrap輸入框組件使用詳解

    Bootstrap輸入框組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】

    CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】

    這篇文章主要介紹了CKEditor 4.4.1 添加代碼高亮顯示插件功能,涉及ckeditor使用官方推薦Code Snippet插件的相關(guān)操作布局與使用注意事項(xiàng),需要的朋友可以參考下
    2019-06-06
  • 淺談JavaScript中promise的使用

    淺談JavaScript中promise的使用

    本文主要對(duì)JavaScript中promise的使用進(jìn)行詳細(xì)介紹。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
    2017-01-01
  • js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告

    js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-07-07
  • ES6中字符串的使用方法擴(kuò)展

    ES6中字符串的使用方法擴(kuò)展

    這篇文章主要給大家介紹了關(guān)于ES6中字符串的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • JavaScript如何輸出楊輝三角

    JavaScript如何輸出楊輝三角

    這篇文章主要介紹了JavaScript如何輸出楊輝三角問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • javascript常用的方法整理

    javascript常用的方法整理

    JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分，所以想學(xué)好AJAX以及現(xiàn)在流行的AJAX框架，學(xué)好JAVASCRIPT是最重要的。這章我給大家整理了一些JAVASCRIPT的基礎(chǔ)知識(shí)、常用代碼和事件匯總。
    2015-08-08

最新評(píng)論