jQuery Mobile Transitions处理两次

时间:2012-05-24 16:21:06

标签: jquery-mobile

我的过渡是生涩的,有些时间似乎要处理两次。所以它不是从页面到页面的平滑流体过渡。我在编码中做错了吗?这是在带有最新更新的iPhone 4S上测试的。

<div data-role="page" id="track_dash">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3><!-- ex: Phase 1, Day 1 --> Phase #, Day # </h3>
        <a data-role="button" data-transition="flip" data-theme="b" class="ui-btn-right" href="#page2"> Info </a>
    </div>
    <div data-role="content">
        <div class="360">
            <img src="simgs/360_logo.png" /><!-- style="width: 170px; height: 91px" -->
        </div>
        <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-theme="c">
                <a href="#page4" data-transition="slide"> Track Meals </a>
            </li>
            <li data-theme="c">
                <a href="#page20" data-transition="slide"> Track Workouts </a>
            </li>
            <li data-theme="c">
                <a href="#page8" data-transition="slide"> Track Progress </a>
            </li>
            <li data-theme="c">
                <a href="#page17" data-transition="slide"> Journal </a>
            </li>
        </ul>
        <ul data-role="listview" data-divider-theme="d" data-inset="true">
            <li data-theme="d">
                <a href="#page52" data-transition="slide"> <img src="simgs/alert_bubble.png" alt="Alerts" class="ui-li-icon" /> Alerts <span class="ui-li-count">2</span> </a>
            </li>
        </ul>
    </div>

    <div data-theme="e" data-role="footer" data-position="fixed">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#page1" id="track" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active"> <span class="foot_font">Track</span> </a>
                </li>
                <li>
                    <a href="#page40" id="cal" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span"> <span class="foot_font">Calendar</span> </a>
                </li>
                <li>
                    <a href="#page44" id="shop" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span"> <span class="foot_font">Shopping</span> </a>
                </li>
                <li>
                    <a href="#page22" id="profile" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span"> <span class="foot_font">Profile</span> </a>
                </li>
                <li>
                    <a href="#page47" id="more" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span"> <span class="foot_font">More</span> </a>
                </li>
            </ul>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

可能由this issue - jquery mobile 1.1引起。当您在标题中设置data-position =“fixed”时,它尤其明显。 这个问题有一些答案,直到最后才能阅读。

除非更具体,否则您需要描述您使用的浏览器或移动操作系统(如果您不知道)以及您正在使用的jqm版本。