【问题标题】:OnsenUI ons-pull-hook not working in IE11 on WP8.1OnsenUI ons-pull-hook 在 WP8.1 上的 IE11 中不起作用
【发布时间】:2015-07-22 14:49:37
【问题描述】:

我一直在尝试让 ons-pull-hook 在我的 WP8.1 设备上与 PhoneGap/Cordova 一起工作,但运气不佳。

我正在使用可以在这里找到的官方示例:

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/ (不知道为什么它不在 SO 中)

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

其他一切正常,点击、输入、滚动等。只是拉动刷新不起作用。还有其他人遇到此问题和/或找到解决方案吗?

我尝试将不同的样式更改为

编辑 1:

它也不适用于 IE11/Edge 直接访问它,所以我猜这个问题一般与 IE11/Edge 有关,与 Cordova 本身或 Visual Studio 部署无关。

编辑 2:

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

编辑 3:

添加一个更简单的示例,它与 Cordova 或 Visual Studio 没有任何关系,而是 IE11 如何处理指针事件(可能是 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>

谢谢

【问题讨论】:

  • 您是否从 Visual Studio Gallery 下载了 Onsen UI 1.3.4 模块? WP 的代码需要稍微修改一下,比如包括ng-csp 和Windows shim。只是想知道您是否已准备好所有这些。另外,您可以尝试一个不使用 HTTP 请求的简单示例吗?只是为了确保问题与域无关。
  • @FranDios 问题在于,这与部署到设备的应用程序根本没有任何关系。我认为这实际上是 WP8.1 上的 IE11 的问题,在继续调试了一整天后,我无法使其单独在 IE 上运行(通过 URL 访问该站点,甚至不是官方的 codepen 示例)。关于视觉工作室的东西,我没有,我手动下载了所有内容,甚至尝试了今天发布的 1.3.5。还有一个没有 HTTP 请求的例子,我会查找它并将其附加到原始问题中。
  • 出于某种原因,IE11 中的行为有时与已部署的 Cordova 应用程序中的行为不同。我们刚刚使用 Visual Studio Gallery 中提供的模板再次测试了 Pull Hook,它作为 Cordova 应用程序运行良好。
  • @AgustinSaldias 您使用的是哪个版本的 Cordova?
  • @AndiPavllo 最新的一个,但仍然......我无法让它在设备上直接在 IE11 上运行,而不使用 Cordova 或 Visual Studio......我手机上的旧 IE :/。我已经能够发现锤子事件由于某种原因没有 event.center.clientX/Y 值,所以锤子无法正确使用 Detection.extendEventData 因为没有可用的信息......我不知道为什么老实说这不起作用……不过感谢 cmets!我还不会放弃!

标签: windows-phone-8.1 internet-explorer-11 onsen-ui


【解决方案1】:

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

我使用的是 wp8 平台,而不是(通用)windows 平台,这意味着整个项目不能 100% 兼容 WP8.1 上的 IE,因为 wp8 平台依赖于 WebView...

我在做什么:

cordova platform add wp8 -> cordova build wp8 -> 打开.sln文件,将目标平台改为wp8.1 - > 部署到设备

我现在在做什么:

cordova 平台添加窗口 -> cordova 构建窗口 --phone -> 打开.sln 文件

现在一切正常。

另一方面,我仍然无法在没有 cordova.js 的情况下直接在 IE11 上运行,所以我猜这是 Hammer.js 而不是 Onsen-UI 的问题,尽管它依赖于在它上面,这让我感到困惑。但这完全是另一个问题。

【讨论】:

猜你喜欢
  • 2018-03-21
  • 1970-01-01
  • 2019-07-04
  • 2016-05-16
  • 2019-09-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-10
相关资源
最近更新 更多