微信小程序開發(fā)之實現(xiàn)自定義Toast彈框
更新時間：2017年06月08日 11:54:11 作者：何東_hd
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生，有時候官方的樣式并不能滿足業(yè)務要求，怎么辦呢，當然有解決辦法了。有一個插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實現(xiàn)自定義Toast彈框的相關資料，需要的朋友可以參考下。
前言
之前有篇文章是寫的Toast使用，但是有時候官方的樣式并不能滿足業(yè)務要求，怎么辦呢，當然有解決辦法了。有一個插件可以直接幫我們完成，WeToast。
先來看一下效果圖：
怎么用呢，我們來看一下：
WeTaost插件源碼位于src目錄下，包含3個文件。
- wetoast.js: 腳本代碼
- wetoast.wxml: 模板結構
- wetoast.wxss: 樣式
使用時只需要加入以上3個文件即可
第一步：在項目的app.js中引入wetoast.js，并注冊到小程序上，小程序所有Page頁面均可使用
//app.js
let {WeToast} = require('src/wetoast.js')
//注冊小程序，接收一個Object參數(shù)
App({
WeToast
})
第二步：在項目的app.wxss中引入wetoast.wxss
@import "src/wetoast.wxss";
至于里面的樣式，彈框大小，可自行修改。
第三步：引入WeToast模板
<import src="../../src/wetoast.wxml"/>
<!-- wetoast -->
<template is="wetoast" data="{{...__wetoast__}}"/>
最后要想在那個頁面使用，就在onLoad里面創(chuàng)建WeToast實例：
// 獲取應用實例
let app = getApp()
Page({
data: {},
// 僅執(zhí)行一次，可用于獲取、設置數(shù)據(jù)
onLoad: function () {
//創(chuàng)建可重復使用的WeToast實例，并附加到this上，通過this.wetoast訪問
new app.WeToast()
},
onTimeToast: function () {
this.wetoast.toast({
title: '請輸入手機號',
duration: 1000
})
}
})
可以自定義持續(xù)時間，很方便。
demo：點擊下載
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果
這篇文章主要介紹了利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果的相關資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信JS接口匯總及使用詳解，十分的全面、詳盡，包含分享到朋友圈，分享給朋友，分享到QQ，拍照或從手機相冊中選圖，識別音頻并返回識別結果，使用微信內置地圖查看位置等接口，有需要的小伙伴參考下吧2015-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄
: js中用方法sort()為數(shù)組排序,這篇文章主要給大家介紹了關于JavaScript中數(shù)組sort()方法的基本使用,sort()方法已經(jīng)可以滿足我們對數(shù)組的很多處理需求,需要的朋友可以參考下2021-06-06
下面小編就為大家?guī)硪黄獙τ贘avascript 執(zhí)行上下文的全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了JS去除字符串中空格的方法,涉及javascript字符串的正則、遍歷、運算等相關操作技巧,需要的朋友可以參考下2017-02-02
下面小編就為大家?guī)硪黄狫S創(chuàng)建數(shù)組的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JS代碼混淆初步...2006-09-09
這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
Webpack 之 babel-loader文件預處理器詳解
這篇文章主要介紹了Webpack 之 babel-loader文件預處理器詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03