微信小程序自定義toast實(shí)現(xiàn)方法詳解【附demo源碼下載】
本文實(shí)例講述了微信小程序自定義toast實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
一、微信官方默認(rèn)toast
toast最常見了，幾乎每個(gè)App都有這樣的特效，先看下小程序自帶的toast效果，立馬想死的心都有了~~
微信自帶toast的效果：
js文件：
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
用法超級(jí)簡(jiǎn)單，但官方小程序有幾個(gè)問題：
只能顯示success、loading兩種icon
且icon不可去除
持續(xù)時(shí)間最大10秒
二、自定義toast
我們最常見的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，才能通過page.setData把當(dāng)前頁(yè)面的數(shù)據(jù)綁定到toast上面。
核心代碼：
let animation = wx.createAnimation(); animation.opacity(1).step();
這段代碼是toast消失的時(shí)候有一個(gè)緩慢的動(dòng)畫效果。
附：完整demo實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
- 微信小程序 toast組件詳細(xì)介紹
- 微信小程序開發(fā)之toast等彈框提示使用教程
- 微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
- 微信小程序開發(fā)之toast提示插件使用示例
- 微信小程序?qū)崙?zhàn)之自定義toast（6）
- 微信小程序 toast 詳解及實(shí)例代碼
- 微信小程序 Toast自定義實(shí)例詳解
- 微信小程序 自定義Toast實(shí)例代碼
- 微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
- 微信小程序使用component自定義toast彈窗效果
- 微信小程序自定義toast的實(shí)現(xiàn)代碼
- 微信小程序自定義toast組件的方法詳解【含動(dòng)畫】
相關(guān)文章
從數(shù)組中隨機(jī)取x條不重復(fù)數(shù)據(jù)的JS代碼
這篇文章主要介紹了從數(shù)組中隨機(jī)取x條不重復(fù)數(shù)據(jù)的JS代碼，有需要的朋友可以參考一下2013-12-12
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量。這篇文章主要介紹了ES6的解構(gòu)賦值的實(shí)例代碼 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS文件上傳時(shí)如何使用MD5加密，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了JScript實(shí)現(xiàn)地址選擇功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
javascript實(shí)現(xiàn)的固定位置懸浮窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的固定位置懸浮窗口,以一個(gè)完整實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法,涉及javascript鼠標(biāo)事件及頁(yè)面跳轉(zhuǎn)的相關(guān)技巧,簡(jiǎn)單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
web3.js增加eth.getRawTransactionByHash(txhash)方法步驟
這篇文章主要介紹了web3.js增加eth.getRawTransactionByHash(txhash)方法步驟,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了javascript頭像上傳代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JS實(shí)現(xiàn)預(yù)加載視頻音頻/視頻獲取截圖（返回canvas截圖）
這篇文章主要介紹了JS實(shí)現(xiàn)預(yù)加載視頻音頻/視頻獲取截圖（返回canvas截圖）的相關(guān)資料,需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇layui表格分頁(yè) 記錄勾選的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09