天天看點

借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”

今天遇到了這麼個問題,如下:

功能需求:有兩個頁面A和B,點選A中的"确定"按鈕,超連結到頁面B,在跳轉到B頁面時出現“Loading”的樣式。

需求分析:作為一個後端程式員,一開始想到的是,在頁面A上放一個div,div裡放一張loading的gif圖檔,最開始的時候該div是隐藏的,然後點選"确定"時,将該div顯示出來。

實踐效果:在網上随便找了一張在後端看着還不錯的gif loading圖檔,然後按照上面的思路來做,結果是我始料未及的。一是随便找的gif大小和色調都和目前整個web不搭,二是顯示的位置不在中央,三是反正給後端的感覺就是很矬!

思考糾正:項目是基于支付寶服務窗和微信服務号的,整個樣式都是用的支付寶的AntUI(http://am-team.github.io/antui/nav.html#info)。結果再次看文檔的時候發現有個Toast提示的UI元素,然後再次思考如下,在按鈕的點選事件中,先将Loading效果的html内容追加到頁面A的body元素中,然後再跳轉到頁面B。

代碼如下:

 頁面使用了一個布局頁,然後引入toast.css檔案,當然,還有一個其他樣式檔案。

借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”
借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”

2.以下是“确認”按鈕的代碼。

借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”
借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”

3.下面是點選按鈕執行的代碼。

借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”
借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”

最終效果:

借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”
借助阿裡AntUI元素實作兩個Web頁面之間的過渡——“Loading…”

最後小結:該功能确實很簡單,但是對于自己也是一個學習的過程,學習了阿裡的AntUI架構,同時該博文也算是自己學習中小小的筆記吧,友善自己日後查閱。如果您也有同樣的需求,望各位笑納!

本文轉自tkbSimplest部落格園部落格,原文連結:http://www.cnblogs.com/farb/p/4919171.html,如需轉載請自行聯系原作者