Question

我一直试图在我的WP8.1设备上使用PhoneGap / Cordova进行ons-pull-hook工作但是运气不好。

我正在使用可在此处找到的官方示例：

ons.bootstrap()
      .controller('DemoController', function($scope, $timeout, $http) {
        $scope.items = [];
        $scope.load = function($done) {
          $timeout(function() {
            $http.jsonp('http://numbersapi.com/random/year?callback=JSON_CALLBACK')
              .success(function(data) {
                $scope.items.unshift({
                  desc: data,
                  rand: Math.random()
                });
              })
              .error(function() {
                $scope.items.unshift({
                  desc: 'No data',
                  rand: Math.random()
                });
              })
              .finally(function() {
                $done();
              });
          }, 1000);
        };
        $scope.reset = function(){
          $scope.items.length = 0;
        }
      });

.left {
	text-align: left;
}

img{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

ons-list-item {
    line-height: 22px !important;
}

.info{
	margin-top: 20px;
	text-align: center;
	opacity: 0.75;
}

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.4/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.4/build/css/onsenui.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.4/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.4/build/js/onsenui.min.js"></script>

<ons-page ng-controller="DemoController">
      <ons-pull-hook ng-action="load($done)" var="loader">
        <span ng-switch="loader.getCurrentState()">
          <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
          <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
          <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
        </span>
      </ons-pull-hook>

      <ons-toolbar>
        <div class="center">Pull to refresh</div>
        <div class="right">
          <ons-toolbar-button ng-click="reset()">Reset</ons-toolbar-button>
        </div>
      </ons-toolbar>

      <ons-list>  
        <ons-list-item ng-show="items.length === 0">
          <div class="info">
            Pull down to fetch items
          </div>
        </ons-list-item>
        <ons-list-item class="item" ng-repeat="item in items">
            <ons-row>
                <ons-col width="80px">
                  <img ng-src="http://lorempixel.com/60/60/?{{item.rand}}" class="item-thum"></img>
                </ons-col>
                <ons-col>
                    <p class="item-desc">{{ item.desc }}</p>
                </ons-col>
            </ons-row>
        </ons-list-item>
      </ons-list>  
    </ons-page>

或者在CodePen中，实际的http请求有效http://codepen.io/onsen/pen/WbJogM/ （不知道为什么它不在这里）

它在浏览器上工作得很好，甚至在Chrome上使用Ripple模拟器，但是当使用Cordova构建和Visual Studio部署到我的设备时，拉动刷新操作根本不起作用。

其他所有功能都很好，点击，输入，滚动等只是拉动刷新不起作用。是否有其他人遇到此问题和/或找到了解决方案？

我尝试改变不同的风格，尝试禁用过度滚动也没有成功，我一直在寻找几天。

编辑1：

它也无法与IE11 / Edge直接访问它，所以我的猜测是这个问题与IE11 / Edge有关，一般与Cordova本身或visual studio部署无关。

编辑2：

然而，它通过触摸模拟Windows Phone在我的Surface Pro 3上的IE11桌面上运行...所以这对于真正的IE11 for Windows Phone 8.1本身来说必定是一个非常具体的问题..

编辑3：

添加一个更简单的例子，它与Cordova和Visual Studio没有任何关系，而是IE11如何处理pointerEvents（也许这是Onsen本身的一个问题），也许......这就是我曾经做过的事情。能够在过去2-3天内挖掘到目前为止。

ons.bootstrap()
.controller('MyController', function($scope, $timeout) {
    $scope.items = [3, 2 ,1];

    $scope.load = function($done) {
      $timeout(function() {
        $scope.items.unshift($scope.items.length + 1);
        $done();
      }, 500);
    };
  });

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.5/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.5/build/css/onsenui.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.5/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.5/build/js/onsenui.min.js"></script>

<ons-page ng-controller="MyController">
  <ons-toolbar>
    <div class="center">Pull to refresh</div>
  </ons-toolbar>
  <ons-pull-hook var="loaded" ng-action="load($done)">
    <span ng-switch="loader.getCurrentState()">
      <span ng-switch-when="initial">Pull down to refresh</span>
      <span ng-switch-when="preaction">Release to refresh</span>
      <span ng-switch-when="action">Loading data. Please wait...</span>
    </span>
  </ons-pull-hook>
  <ons-list>
    <ons-list-item ng-repeat="item in items">
      Item #{{ item }}
    </ons-list-item>
  </ons-list>
</ons-page>

由于

Answer 1

我觉得非常愚蠢地发布我自己的问题的答案，但我设法让它在Cordova内部工作，这是我的错误。我从评论中得到的线索让我意识到我可能没有正确地导出/构建项目。

我使用的是wp8平台，而不是（通用）Windows平台，这意味着整个项目与WP8.1上的IE不是100％兼容，因为wp8平台依赖于WebView ......

我在做什么：

cordova平台添加wp8 - ＆gt; cordova build wp8 - ＆gt; 打开.sln文件，将目标平台更改为wp8.1 - ＆gt; 部署到设备

我现在在做什么：

cordova平台添加窗口 - ＆gt; cordova构建窗口 - - 电话 - ＆gt; 打开.sln文件

现在一切正常。

另一方面，如果没有cordova.js，我仍然无法直接在IE11上运行，所以我猜这是Hammer.js而不是Onsen-UI的问题，即使它依赖就这而言，这让我很困惑。但这完全是另一个问题。

在WP8.1上，OnsenUI ons-pull-hook在IE11中不起作用

1 个答案: