工作中遇到一個(gè)需求，就是控制用戶進(jìn)入應(yīng)用時(shí)自動(dòng)打開彈窗的展示順序。

需求和現(xiàn)狀

用戶進(jìn)入應(yīng)用時(shí)會(huì)展示一系列的彈窗，這些彈窗的展示內(nèi)容以及展示與否取決于進(jìn)入應(yīng)用時(shí)的一系列請(qǐng)求結(jié)果。由于接口請(qǐng)求返回?cái)?shù)據(jù)的時(shí)間不確定，所以依賴不同接口的彈窗之間的展示順序也不確定，且多個(gè)彈窗會(huì)出現(xiàn)疊加展示的問題，用戶體驗(yàn)很不好。

產(chǎn)品需求就是希望彈窗的展示順序可控，并且同時(shí)只展示一個(gè)彈窗。

解決方案

解決思路是這樣：

封裝一個(gè)中間層，所有的彈窗不直接展示出來，而是把展示的處理函數(shù)統(tǒng)一放在中間層的數(shù)據(jù)中，等待所有依賴接口都請(qǐng)求完成，也就是彈窗數(shù)據(jù)都加入到中間層之后，再按照既定順序依次執(zhí)行彈窗的展示函數(shù)。

依照這個(gè)思路，我封裝了一個(gè) PopControl 的類，針對(duì)上面幾點(diǎn)分別暴露了下面幾個(gè) api：

- popControl.reset()，用來重置依賴接口狀態(tài)和彈窗數(shù)據(jù)

- popControl.load(key)，用來標(biāo)記該接口已經(jīng)請(qǐng)求完成

- popControl.push(key, callback, startDelay = 100, endDelay = 100, repeatPushShow = true)，用來把彈窗插入到彈窗隊(duì)列中

- popControl.next(key)，用來標(biāo)記該彈窗已展示完成

項(xiàng)目 github 地址：前往

使用

具體使用的時(shí)候，需要先實(shí)例化出來一個(gè) popControl，構(gòu)造函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)所有彈窗的 key 組成的數(shù)組 popKeys(按照展示順序排序)，第二個(gè)參數(shù)是所有依賴接口的 key 組成的數(shù)組。

然后在接口請(qǐng)求成功之后 load 對(duì)應(yīng)的 key，把依賴該接口的彈窗展示函數(shù) push 進(jìn) popControl 中，直到所有的接口都 load 完成，popControl 就會(huì)按照 popKeys 的順序依次展示彈窗。每個(gè)彈窗展示完成之后要調(diào)用 popControl.next(key)，標(biāo)記當(dāng)前彈窗已經(jīng)展示完成，方便展示下一個(gè)彈窗。

示例代碼如下：

import PopControl from "popControl"

const popKeys = ["pop1", "pop2", "pop3"];

const interfaces = ["ajaxSignin", "ajaxUseInfo"];

const popControl = new PopControl(popKeys, interfaces);

request("/ajaxSignin").then(() => {

// 把依賴這個(gè)接口的彈窗展示函數(shù) push 進(jìn)彈窗隊(duì)列

popControl.push("pop1", () => {

// 展示 pop1 的操作

this.showPop1 = true;

})

popControl.push("pop2", () => {

// 展示 pop2 的操作

this.showPop2 = true;

})

popControl.load("ajaxSignin);

})

request("/ajaxUseInfo").then(() => {

// 把依賴這個(gè)接口的彈窗展示函數(shù) push 進(jìn)彈窗隊(duì)列

popControl.push("pop3", () => {

// 展示 pop3 的操作

this.showPop3 = true;

})

popControl.load("ajaxUseInfo);

})

function pop1Close() {

this.showPop1 = false;

// 標(biāo)記 pop1 已經(jīng)展示完成，可以展示下一個(gè)彈窗

popControl.next("pop1");

}

function pop2Close() {

this.showPop2 = false;

// 標(biāo)記 pop2 已經(jīng)展示完成，可以展示下一個(gè)彈窗

popControl.next("pop2");

}

function pop3Close() {

this.showPop3 = false;

// 標(biāo)記 pop3 已經(jīng)展示完成，可以展示下一個(gè)彈窗

popControl.next("pop3");

}

關(guān)于找一找教程網(wǎng)

本站文章僅代表作者觀點(diǎn)，不代表本站立場(chǎng)，所有文章非營(yíng)利性免費(fèi)分享。

本站提供了軟件編程、網(wǎng)站開發(fā)技術(shù)、服務(wù)器運(yùn)維、人工智能等等IT技術(shù)文章，希望廣大程序員努力學(xué)習(xí)，讓我們用科技改變世界。

[控制彈窗展示順序]http://www.zyiz.net/tech/detail-113174.html

總結(jié)

以上是生活随笔為你收集整理的html如何控制弹窗位置,控制弹窗展示顺序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。