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