微信小程序自定義toast實現方法詳解【附demo源碼下載】
更新時間：2017年11月28日 11:19:59 作者：大灰狼的小綿羊哥哥
這篇文章主要介紹了微信小程序自定義toast實現方法,簡單描述了微信小程序自帶toast使用方法,并結合實例形式分析了自定義toast的定義與使用方法,需要的朋友可以參考下
本文實例講述了微信小程序自定義toast實現方法。分享給大家供大家參考，具體如下：
一、微信官方默認toast
toast最常見了，幾乎每個App都有這樣的特效，先看下小程序自帶的toast效果，立馬想死的心都有了~~
微信自帶toast的效果：
js文件：
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
用法超級簡單，但官方小程序有幾個問題：
只能顯示success、loading兩種icon
且icon不可去除
持續(xù)時間最大10秒
二、自定義toast
我們最常見的toast是偏底部，而且高度是比較小的那種~~
先看效果：
看似簡單，實現起來相當不簡單，如何實現：
1）建立一個公共的toast的template模板文件，因為每個頁面都需要用到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 表示可以獲得當前頁面的page，只有獲得了page，才能通過page.setData把當前頁面的數據綁定到toast上面。
核心代碼：
let animation = wx.createAnimation(); animation.opacity(1).step();
這段代碼是toast消失的時候有一個緩慢的動畫效果。
附：完整demo實例代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
這篇文章主要介紹了從數組中隨機取x條不重復數據的JS代碼，有需要的朋友可以參考一下2013-12-12
解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。這篇文章主要介紹了ES6的解構賦值的實例代碼 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS文件上傳時如何使用MD5加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了JScript實現地址選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了javascript實現的固定位置懸浮窗口,以一個完整實例形式詳細分析了javascript實現固定位置懸浮窗口的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript實現點擊單選按鈕鏈接轉向對應網址的方法,涉及javascript鼠標事件及頁面跳轉的相關技巧,簡單實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
web3.js增加eth.getRawTransactionByHash(txhash)方法步驟
這篇文章主要介紹了web3.js增加eth.getRawTransactionByHash(txhash)方法步驟,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了javascript頭像上傳代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JS實現預加載視頻音頻/視頻獲取截圖（返回canvas截圖）
這篇文章主要介紹了JS實現預加載視頻音頻/視頻獲取截圖（返回canvas截圖）的相關資料,需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇layui表格分頁 記錄勾選的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09