微信小程序之自定義Toast
發(fā)布時(shí)間：2018-04-13 15:03 所屬欄目：小程序開(kāi)發(fā)教程
有時(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
- })
- }
- })
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.szcjxy.com/wxmini/doc/course/23353.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
