這篇文章主要為大家展示了“小程序如何實現(xiàn)自定義通用toast組件”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“小程序如何實現(xiàn)自定義通用toast組件”這篇文章吧。
創(chuàng)新互聯(lián)專注于雁山企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。雁山網(wǎng)站建設(shè)公司,為雁山等地區(qū)提供建站服務(wù)。全流程按需設(shè)計,專業(yè)設(shè)計,全程項目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)需求
小程序的toast僅支持在頁中展示,不能自定義位置、字體大小、在單個文本中增加icon等需求;因此自定義一個全局可通用的Toast。
效果預(yù)覽
如何使用
代碼目錄位于 /widget/toast 下,包含3個文件
toast.js 腳本代碼
toast.css 樣式文件,可以根據(jù)自己需求定制
toast.swan 模板結(jié)構(gòu),可以根據(jù)自己需求定制
使用步驟一:
將/widget/toast的三個文件,放在與page同名的widget文件夾中,如果項目沒有widget文件夾,就新建一個。
使用步驟二:
在項目的整個 app.js 中引入,一次引入,所有page均可以使用:
// app.js import { 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}}"/>
使用步驟五
在具體的頁面進(jìn)行初始化調(diào)用:
/ 初始化 new app.BdToast(); // 具體調(diào)用: Page({ data: {}, onLoad() { new app.BdToast(); }, clickShowToast(e) { switch (+e.target.dataset.id) { case 1: this.bdtoast.toast({ title: '僅顯示標(biāo)題' }); break; case 2: this.bdtoast.toast({ title: '設(shè)置圖片+文字', iconSrc: '../../images/loading.gif' }); break; case 3: this.bdtoast.toast({ title: '設(shè)置時間', duration: 1000 }); break; case 4: this.bdtoast.toast({ title: '設(shè)置標(biāo)題', subTitle: '副標(biāo)題' }); break; } } });
參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
title | string | 是 | 標(biāo)題 |
iconSrc | string | 否 | icon地址,提供icon的url,icon大小為32px * 32px |
subTitle | string | 否 | 副標(biāo)題,同時需要title存在才會顯示,否則不顯示副標(biāo)題 |
duration | number | 否 | 持續(xù)時間,不填默認(rèn)1500毫秒 |
success | function | 否 | 執(zhí)行成功的回調(diào) |
fail | function | 否 | 執(zhí)行失敗的回調(diào) |
complete | function | 否 | 完成的回調(diào),不管有沒有執(zhí)行成功 |
以上是“小程序如何實現(xiàn)自定義通用toast組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站欄目:小程序如何實現(xiàn)自定義通用toast組件-創(chuàng)新互聯(lián)
URL標(biāo)題:http://muchs.cn/article34/dhsjse.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、外貿(mào)建站、定制網(wǎng)站、動態(tài)網(wǎng)站、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容