百度小程序自定義通用toast組件

2019-11-19 11:10:38

字體：大中小

來源：轉載

供稿：網友

需求

手百小程序的toast僅支持在頁中展示，不能自定義位置、字體大小、在單個文本中增加icon等需求；因此自定義一個全局可通用的Toast。

效果預覽

如何使用

代碼目錄位于 /widget/toast 下，包含3個文件

toast.js 腳本代碼
toast.css 樣式文件，可以根據自己需求定制
toast.swan 模板結構，可以根據自己需求定制

使用步驟一：

將/widget/toast的三個文件，放在與page同名的widget文件夾中，如果項目沒有widget文件夾，就新建一個。

使用步驟二：

在項目的整個 app.js 中引入，一次引入，所有page均可以使用：

// app.jsimport { BdToast } from './widget/toast/toast.js';App({ BdToast, // 掛載 onLaunch(options) {  // do something when launch }, onShow(options) {  // do something when show }, onHide() {  // do something when hide }});

使用步驟三：

在項目的app.css中引入 toast.css：

// app.css@import "./widget/toast/toast.css";

使用步驟四：

在需要的page頁面，將模板引入：

// pages/index/index.swan<!-- toast使用 --><import src="/widget/toast/toast.swan"/><template is="bdtoast" data="{{bdtoast}}"/>

使用步驟五

在具體的頁面進行初始化調用：

/ 初始化new app.BdToast();// 具體調用：Page({ data: {}, onLoad() {  new app.BdToast(); }, clickShowToast(e) {  switch (+e.target.dataset.id) {   case 1:    this.bdtoast.toast({     title: '僅顯示標題'    });    break;   case 2:    this.bdtoast.toast({     title: '設置圖片+文字',     iconSrc: '../../images/loading.gif'    });    break;   case 3:    this.bdtoast.toast({     title: '設置時間',     duration: 1000    });    break;   case 4:    this.bdtoast.toast({     title: '設置標題',     subTitle: '副標題'    });    break;  } }});

參數說明：

參數	類型	必填	說明
title	string	是	標題
iconSrc	string	否	icon地址，提供icon的url，icon大小為32px * 32px
subTitle	string	否	副標題，同時需要title存在才會顯示，否則不顯示副標題
duration	number	否	持續時間，不填默認1500毫秒
success	function	否	執行成功的回調
fail	function	否	執行失敗的回調
complete	function	否	完成的回調，不管有沒有執行成功