微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
更新時間：2017年06月08日 11:54:11 作者：何東_hd
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生，有時候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。
前言
之前有篇文章是寫的Toast使用，但是有時候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個插件可以直接幫我們完成，WeToast。
先來看一下效果圖：
怎么用呢，我們來看一下：
WeTaost插件源碼位于src目錄下，包含3個文件。
- wetoast.js: 腳本代碼
- wetoast.wxml: 模板結(jié)構(gòu)
- wetoast.wxss: 樣式
使用時只需要加入以上3個文件即可
第一步：在項(xiàng)目的app.js中引入wetoast.js，并注冊到小程序上，小程序所有Page頁面均可使用
//app.js
let {WeToast} = require('src/wetoast.js')
//注冊小程序，接收一個Object參數(shù)
App({
WeToast
})
第二步：在項(xiàng)目的app.wxss中引入wetoast.wxss
@import "src/wetoast.wxss";
至于里面的樣式，彈框大小，可自行修改。
第三步：引入WeToast模板
<import src="../../src/wetoast.wxml"/>
<!-- wetoast -->
<template is="wetoast" data="{{...__wetoast__}}"/>
最后要想在那個頁面使用，就在onLoad里面創(chuàng)建WeToast實(shí)例：
// 獲取應(yīng)用實(shí)例
let app = getApp()
Page({
data: {},
// 僅執(zhí)行一次，可用于獲取、設(shè)置數(shù)據(jù)
onLoad: function () {
//創(chuàng)建可重復(fù)使用的WeToast實(shí)例，并附加到this上，通過this.wetoast訪問
new app.WeToast()
},
onTimeToast: function () {
this.wetoast.toast({
title: '請輸入手機(jī)號',
duration: 1000
})
}
})
可以自定義持續(xù)時間，很方便。
demo：點(diǎn)擊下載
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
JS實(shí)現(xiàn)漢字與Unicode碼相互轉(zhuǎn)換的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)漢字與Unicode碼相互轉(zhuǎn)換的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript針對漢字與Unicode編碼轉(zhuǎn)換的操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)硪黄狫avaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2016-04-04
判斷javascript的數(shù)據(jù)類型(示例代碼)
這篇文章主要是對判斷javascript的數(shù)據(jù)類型(示例代碼)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
不是效率的問題 是 內(nèi)存碎片的問題 用數(shù)組速度比“+”要慢 只是內(nèi)存占的少和內(nèi)存碎片少一些，現(xiàn)在根本不推薦用數(shù)組來處理了。2010-12-12
escape、encodeURI 和 encodeURIComponent 的區(qū)別
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個常用的方法，而他們之間的異同卻困擾了很多的Javascript初學(xué)者，今天我就在這里對這三個方法詳細(xì)地分析與比較一下。2009-03-03
本篇文章主要介紹了webpack 多入口配置 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕組的簡單實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
javascript實(shí)現(xiàn)詳細(xì)時間提醒信息效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)詳細(xì)時間提醒信息效果的方法,涉及javascript操作時間的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JS點(diǎn)擊某個圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼
本文給大家介紹js點(diǎn)擊點(diǎn)擊某個圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯，感興趣的朋友可以參考下2016-09-09
詳解將微信小程序接口Promise化并使用async函數(shù)
這篇文章主要介紹了詳解將微信小程序接口Promise化并使用async函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08