1

我正在尝试为基于 jQuery Mobile 和 ASP.Net MVC 的网站做一个闪屏。我的问题是我不能真正改变导航结构,因为所有的控制器都用在桌面版的网站上。站点的移动端只有单独的 *.Mobile.cshtml 视图,并且必须遵循与桌面站点相同的导航约定。

我要做的是在“主页”页面中创建一个像这样的 jQuery 移动“页面”:

@if (ViewBag.ShowSplash!= null && ViewBag.ShowSplash == true) 
{
    <div data-role="page" data-theme="a" id="splash">
        <div id="splash_container">
            <img src="@Url.Content("~/Content/images/splash_logo.png")" />
        </div>
    </div>
    <script>
        // once we display splash screen, give it 4 seconds and load main container
        $(document).on('pageinit', '#splash', function () {
            var hideSplash = function () {
                $.mobile.changePage($("#container"));
            };
            setTimeout(hideSplash, 4000);
        });
    </script>
}

ViewBag.ShowSplash控制器中设置的位置,检查是否在第一次加载时设置了 cookie。我面临的问题是,每当我回到主屏幕时,启动画面就会不断出现,即使 cookie 已设置并且ViewBag.ShowSplash在控制器中为空。我猜 JQM 正在缓存所有页面并且#splash无限期地卡在那里。

要修复 JQM 缓存,我将#splash像这样删除容器:

// Once main container is loaded, remove splash page-container so we can't come back to that thing again. Ever.
$(document).on('pageshow', '#container', function () {
    $('#splash').remove();
});

这有点适用于飞溅,但会破坏其他东西,比如导航。

我想知道是否有更简单的方法在 JQM 中进行启动屏幕,如果没有,有没有办法告诉 JQM 永远不要回到某个页面?

4

0 回答 0