快捷導(dǎo)航

微信小程序開(kāi)發(fā)之實(shí)現(xiàn)自定義Toast彈框

更新時(shí)間：2017年06月08日 11:54:11 作者：何東_hd

Toast相信對(duì)于利用微信小程序開(kāi)發(fā)的朋友們來(lái)說(shuō)都不陌生，有時(shí)候官方的樣式并不能滿(mǎn)足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開(kāi)發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。

前言

之前有篇文章是寫(xiě)的Toast使用，但是有時(shí)候官方的樣式并不能滿(mǎn)足業(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訪(fǎng)問(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)文章

JS實(shí)現(xiàn)漢字與Unicode碼相互轉(zhuǎn)換的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)漢字與Unicode碼相互轉(zhuǎn)換的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript針對(duì)漢字與Unicode編碼轉(zhuǎn)換的操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-04-04
JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)?lái)一篇JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看
2016-04-04
判斷javascript的數(shù)據(jù)類(lèi)型(示例代碼)
這篇文章主要是對(duì)判斷javascript的數(shù)據(jù)類(lèi)型(示例代碼)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
javascript字符串拼接的效率問(wèn)題
不是效率的問(wèn)題是內(nèi)存碎片的問(wèn)題用數(shù)組速度比“+”要慢只是內(nèi)存占的少和內(nèi)存碎片少一些，現(xiàn)在根本不推薦用數(shù)組來(lái)處理了。
2010-12-12
escape、encodeURI 和 encodeURIComponent 的區(qū)別
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個(gè)常用的方法，而他們之間的異同卻困擾了很多的Javascript初學(xué)者，今天我就在這里對(duì)這三個(gè)方法詳細(xì)地分析與比較一下。
2009-03-03
詳解webpack 多入口配置
本篇文章主要介紹了webpack 多入口配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Bootstrap按鈕組簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕組的簡(jiǎn)單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
javascript實(shí)現(xiàn)詳細(xì)時(shí)間提醒信息效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)詳細(xì)時(shí)間提醒信息效果的方法,涉及javascript操作時(shí)間的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JS點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼
本文給大家介紹js點(diǎn)擊點(diǎn)擊某個(gè)圖標(biāo)或按鈕彈出文件選擇框的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，感興趣的朋友可以參考下
2016-09-09
詳解將微信小程序接口Promise化并使用async函數(shù)
這篇文章主要介紹了詳解將微信小程序接口Promise化并使用async函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08