之前有篇文章是寫的Toast使用,但是有時候官方的樣式並不能滿足業務要求,怎麼辦呢,當然有解決辦法了。有一個插件可以直接幫我們完成,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參數
App({
WeToast
})
第二步:在項目的app.wxss中引入wetoast.wxss
@import "src/wetoast.wxss";
至於裏面的樣式,彈框大小,可自行修改。
第三步:引入WeToast模板
<import src="../../src/wetoast.wxml"/>
<!-- wetoast -->
<template is="wetoast" data="{{...__wetoast__}}"/>
最後要想在那個頁面使用,就在onLoad裏面創建WeToast實例:
// 獲取應用實例
let app = getApp()
Page({
data: {},
// 僅執行一次,可用於獲取、設置數據
onLoad: function () {
//創建可重複使用的WeToast實例,並附加到this上,通過this.wetoast訪問
new app.WeToast()
},
onTimeToast: function () {
this.wetoast.toast({
title: '請輸入手機號',
duration: 1000
})
}
})
可以自定義持續時間,很方便。
demo:點擊下載