借助阿里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。

代碼如下：

1.  頁面使用了一個布局頁，然后引入toast.css文件，當然，還有一個其他樣式文件。

@{
    ViewBag.Title = "溫馨提示";
    Layout = "~/Views/Shared/_amuiLayout.cshtml";
}
@section style
{
    <link href="https://a.alipayobjects.com/amui/dpl/9.0.0.2/??view/agreement.css,widget/toast.css" rel="stylesheet" />@*引入toast樣式*@
}

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

<div class="am-example" id="gotoPay">
    <div class="am-content">
        <button type="button" class="am-button" id="btnSure" am-mode="blue  43px">確認</button>
    </div>
</div>

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

<script>
        $(function() {
            $("#btnSure").click(function () {
                var loadingHtml = "<div class='am-toast'><div class='am-toast-text'><span class='am-toast-icon am-icon'am-mode='toast-loading'></span>載入中</div></div>";//加載中的div代碼
                $('body').append(loadingHtml);//追加到body上
                var url = "/ChargeStation/order/GetDeviceState";
                $.post(url,{deviceCode:"@ViewBag.deviceCode"}, function(res) {//請求server狀態，跟自己的業務相關，無需考慮
                    if (res=="ok") {
                        location.href = "/ChargeStation/order/welcomeThen?deviceCode=@ViewBag.deviceCode &payType=@ViewBag.payType";//跳轉
                        //$('body').remove(loadingHtml);
                    } else {
                        location.href = "/Errors/DeviceConnError?errMsg=設備處於離線狀態！";
                    }
                });
            });
        })
    </script>

 

最終效果：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

最后小結：該功能確實很簡單，但是對於自己也是一個學習的過程，學習了阿里的AntUI框架，同時該博文也算是自己學習中小小的筆記吧，方便自己日后查閱。如果您也有同樣的需求，望各位笑納!