資訊專欄INFORMATION COLUMN
摘要：使用自定義開篇在開發(fā)的中我們經(jīng)常會使用一些的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)上面，這也是優(yōu)秀框架的天然優(yōu)勢，解放你的雙手，放飛吧哈哈開個玩笑了。。。
APICloud使用Aui自定義Toast 開篇
在H5開發(fā)的app中我們經(jīng)常會使用一些ui的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)上面，這也是優(yōu)秀框架的天然優(yōu)勢，解放你的雙手，放飛吧！
哈哈 開個玩笑了。。。咳咳 開始說正事
在一個H5 APP的開發(fā)中我遇到了一個需求，在登錄和關(guān)聯(lián)企業(yè)中需要顯示如下的toast提示框：
1、登錄提示 2、關(guān)聯(lián)企業(yè)的提示 3、AuI官方提供的樣式
簡直就是丑、丑、丑，這能和我們的需求關(guān)聯(lián)上嗎？下面我們來看看吧
通過官方的文檔和源代碼我們可以看有兩個相同的特點(diǎn)，文字和圖標(biāo)是支持更改的，那么樣式的問題，不就是覆蓋嗎？對吧，是不是感覺不可能發(fā)生，或許可以呢？just do it
1、調(diào)用界面引入aui-toast.js和aui.css按照你自己的實(shí)際項目引用就好，這一步是必須的，否則后面的覆蓋就無法進(jìn)行了哦
2、覆寫CSS樣式在需要提示框的界面上，直接覆寫如下的css樣式，這樣我們頁內(nèi)的css樣式就可以直接覆蓋aui.css的樣式
/*toast 樣式覆蓋重寫*/
.aui-toast {
left: 22.5%; // 提示框的定位
width: 20em; // 提示框的長度
color: rgba(0, 0, 0, 0.7); // 提示框文字顏色
background: #ffffff; // 提示框的背景
min-height: 4em; // 最小高度
z-index: 9; // 提示框的層疊效果，類似遮罩一樣的效果
}
上面的樣式基本上不需要做出修改了，可以直接使用，背景和文字的樣式就看項目了
3、自定義顯示的圖標(biāo)、內(nèi)容和顯示的時間為了實(shí)現(xiàn)能夠隨時使用，我將他放在了一個工具方法中，便于后面的使用，具體見下面的代碼
/**
* 調(diào)用出自定義顯示圖標(biāo)、內(nèi)容和顯示時間
* @param {*} title 標(biāo)題 提示信息
* @param {*} time 提示時間 毫秒為單位
* @param {*} iconfontUrl 圖標(biāo)
*/
function customToast(title, time, iconfontUrl) {
// 使用aui彈窗
var toast = new auiToast({});
// 創(chuàng)建一個div設(shè)置遮罩的效果，添加aui遮罩的樣式
var tostdiv = document.createElement("div");
tostdiv.classList.add("aui-mask");
tostdiv.classList.add("aui-mask-in");
document.body.appendChild(tostdiv);
// 自定義彈窗的內(nèi)容
toast.custom({
title: title,
html: "",
duration: time,
});
// 設(shè)置彈窗和遮罩的顯示時間
setTimeout(function () {
tostdiv.classList.remove("aui-mask");
tostdiv.classList.remove("aui-mask-in");
toast.hide();
}, time);
}
實(shí)現(xiàn)遮罩的class樣式可以在aui.css中找到，直接ctrl+f搜索就可以看到了
4、調(diào)用方式引入寫好的工具就可以直接在界面使用了，一行代碼就搞定
customToast(ret["result"], 2000, "../../../image/gantan.png");
好了打開界面觸發(fā)方法的調(diào)用，便可以看到自己想要的樣式了
整個樣式就定義完畢了，可以開始進(jìn)行后面的業(yè)務(wù)了，不說了，繼續(xù)擼代碼了...
如果確實(shí)幫助到你了，那么恭喜，你的需求可能得到了解決。
天亮哥
December 7, 2018 12:53 PM
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99800.html
摘要：使用自定義開篇在開發(fā)的中我們經(jīng)常會使用一些的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)上面，這也是優(yōu)秀框架的天然優(yōu)勢，解放你的雙手，放飛吧哈哈開個玩笑了。。。 APICloud使用Aui自定義Toast 開篇 在H5開發(fā)的app中我們經(jīng)常會使用一些ui的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)...
摘要：使用自定義開篇在開發(fā)的中我們經(jīng)常會使用一些的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)上面，這也是優(yōu)秀框架的天然優(yōu)勢，解放你的雙手，放飛吧哈哈開個玩笑了。。。 APICloud使用Aui自定義Toast 開篇 在H5開發(fā)的app中我們經(jīng)常會使用一些ui的框架來進(jìn)行布局，特別是使用它自適應(yīng)的效果，可以節(jié)省我們很多的精力，把注意力放在邏輯的實(shí)現(xiàn)...
摘要：上一篇文章中我們已經(jīng)實(shí)現(xiàn)了評論的發(fā)布功能，現(xiàn)在要實(shí)現(xiàn)回復(fù)評論的功能，，首先呢，要知道你回復(fù)的是哪一條評論，所以我們這里要或得評論的，當(dāng)點(diǎn)擊評論的時候?qū)崿F(xiàn)評論的回復(fù)，這里用到，把該方法放到中，這里叫做，然后在里面的里面定義一個參數(shù)，把賦給的值 上一篇文章中我們已經(jīng)實(shí)現(xiàn)了評論的發(fā)布功能，現(xiàn)在要實(shí)現(xiàn)回復(fù)評論的功能，，首先呢，要知道你回復(fù)的是哪一條評論，所以我們這里要或得評論的id，當(dāng)點(diǎn)擊評論...
閱讀 1010·2021-11-22 13:52
閱讀 924·2019-08-30 15:44
閱讀 570·2019-08-30 15:43
閱讀 2424·2019-08-30 12:52
閱讀 3473·2019-08-29 16:16
閱讀 637·2019-08-29 13:05
閱讀 2943·2019-08-26 18:36
閱讀 1975·2019-08-26 13:46
