Question

我在页面之间使用pushPage幻灯片动画（行为缓慢）时遇到问题。

Cordova 4.3.0 / OnsenUI 1.3.0 / iOs 8.3。

也许fastClick不起作用！？有人可以帮我找到这个bug吗？

代码：

的index.html

 <ons-sliding-menu
        menu-page="pages/menu.html" main-page="pages/page1.html" side="left"
        var="menu" type="reveal" max-slide-distance="65%" swipable="true">
    </ons-sliding-menu>

page1.html

<ons-navigator var="appNavigator">

<ons-modal var="modal1" style="display:none;" id="modal1">
    <ons-icon size="20px" spin="true" icon="ion-load-c"></ons-icon>
    <br><br>
    Loading...
</ons-modal>


<ons-page ng-controller="controller1">

  <ons-pull-hook ng-action="load($done)" var="loader">
      <span ng-switch="loader.getCurrentState()">
          <span ng-switch-when="initial" style="opacity:0.7;font-size:12px;color:#e23b3c;"><ons-icon style="color:#e23b3c;" size="20px" icon="ion-arrow-down-a"></ons-icon> Baja para actualizar</span>
          <span ng-switch-when="preaction" style="opacity:0.7;font-size:12px;color:#e23b3c;"><ons-icon style="color:#e23b3c;" size="20px" icon="ion-arrow-up-a"></ons-icon> Suelta para actualizar</span>
          <span ng-switch-when="action" style="opacity:0.7;font-size:12px;color:#e23b3c;"><ons-icon style="color:#e23b3c;" size="20px" spin="true" icon="ion-load-c"></ons-icon> Loading...</span>
      </span>
  </ons-pull-hook>

  <ons-toolbar style="background-color:#e23b3c;">
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()">
        <ons-icon icon="ion-navicon" size="28px" fixed-width="false" style="color:#fff;"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center" style="color:#fff;">TITLE...</div>
  </ons-toolbar>

       <section style="height:100%;">
            <ons-list id="lista_descuentos" style="width:100%;height:100%;">
                <ul>
                    <li ng-click="showDetail($index)" ng-repeat="data in todo.all" class="list__item list__item--tappable list__item__line-height list-item-container list__item--chevron">

                      <div class="ribbon-wrapper-green">
                        <div class="ribbon-green">{{data.data1}}%</div>
                      </div>
                      <div class="list-item-main">
                          <div class="list-item-left" ng-if="data.data2 == 1">
                              <img src="urlXXX/{{data.data3}}" class="thumbnail"/>
                          </div>
                          <div class="list-item-left" ng-if="data.data2 != 1">
                              <img src="urlXXX/{{data.data3}}" class="thumbnail desaturate"/>
                          </div>
                        <div class="list-item-right">
                          <div class="list-item-content">
                            <span class="list-item-name">{{data.data4}}<br/>
                              <span class="lucent">{{data.data5}}</span>
                            </span>
                            <br/>
                          </div>
                        </div>
                      </div>
                      <span class="list-item-action"></span>
                    </li>
                </ul>
            </ons-list>
        </section>
    </ons-page>

page2.html

<ons-page ng-controller="controller2">
    <ons-toolbar style="background-color:#e23b3c;">
        <div class="left" style="color:#fff;"><ons-back-button >Back</ons-back-button></div>
        <div class="center" style="color:#fff;">{{data1}}</div>
    </ons-toolbar>

    <div style="height:100%;width:100%;background-position:center; background-repeat:no-repeat; background-size:cover;background-color: #333;background-size:cover;" class="desaturateDiv">
        <div class="dots"></div>
        <div style="position:absolute;bottom:0;width:100%;height:100%;background-color:rgba(51, 51, 51, 0.6);z-index:90;">
        </div>
        <div style="position:absolute;bottom:0;width:100%;height:30%;background-color:rgba(51, 51, 51, 0.7);z-index:91;color:#fff;">
            {{dato2}}
        </div>
    </div>

app.js

module.controller('controller1', function($scope, $http, info) {

               var firstTime = 1;
               var getData = function ($done) {
               if (firstTime==1){
                  modal1.show();
               }

               $http({method: 'GET', url: info.url}).
               success(function(data, status, headers, config) {
                       if ($done) { $done(); }
                          $scope.todo = data;
                       if (firstTime==1){
                          modal1.hide();
                       }
                       }).
               error(function(data, status, headers, config) {

                     if ($done) { $done(); }
                        alert('error');
                        modal1.hide();
                     });

               }

               // Initial Data Loading
               getData();

               $scope.load = function($done) {
                  firstTime = 0;
                  getData($done);
               };



               $scope.showDetail = function(index) {


               var selectedItem = $scope.todo.all[index];
               console.log('asd: '+selectedItem.data1);

               $scope.appNavigator.pushPage('pages/page2.html',{data1:selectedItem.data1, data2:selectedItem.data2, data3:selectedItem.data3});

               }



            });


 module.controller('controller2', function($scope) {

                    $scope.data1 = appNavigator.getCurrentPage().options.data1;
                    $scope.data2 = appNavigator.getCurrentPage().options.data2;
                    $scope.data3 = appNavigator.getCurrentPage().options.data3;

               });

Answer 1

如果正确配置了元视口标记，我没有300毫秒延迟。

使用以下视口设置禁用缩放缩放，因此不应有延迟：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

如果没有定义视口标记，Onsen UI将动态设置视口标记。

缓慢行为pushPage Onsen UI

1 个答案: