有時(shí)候官方的樣式并不能滿足業(yè)務(wù)要求,怎么辦呢,當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成,WeToast。先來看一下效果圖:

怎么用呢,我們來看一下:
WeTaost插件源碼位于src目錄下,包含3個(gè)文件。
wetoast.js: 腳本代碼
wetoast.wxml: 模板結(jié)構(gòu)
wetoast.wxss: 樣式
使用時(shí)只需要加入以上3個(gè)文件即可
第一步:在項(xiàng)目的app.js中引入wetoast.js,并注冊(cè)到小程序上,小程序所有Page頁面均可使用
-
//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è)頁面使用,就在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: '請(qǐng)輸入手機(jī)號(hào)',
-
duration: 1000
-
})
-
}
-
})