OnsenUI ons-pull-hook 在 WP8.1 上的 IE11 中不起作用
OnsenUI ons-pull-hook not working in IE11 on WP8.1
我一直在尝试让 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>
或者在实际 http 请求有效的 CodePen 中 http://codepen.io/onsen/pen/WbJogM/ (不知道为什么它不在这里)
它在浏览器上工作得很好,甚至在 Chrome 上使用 Ripple 模拟器,但是当使用 Cordova 构建和 Visual Studio 部署到我的设备时,下拉刷新操作没有完全没有工作。
其他一切正常,点击、输入、滚动等。只是下拉刷新不起作用。有其他遇到此问题的人 and/or 找到了解决方案吗?
我尝试更改不同的样式,也尝试禁用过度滚动但没有成功,我已经搜索了好几天了。
编辑 1:
它也不适用于 IE11/Edge 直接访问它,所以我的猜测是这个问题一般与 IE11/Edge 有关,与 Cordova 本身或 visual studio部署。
编辑 2:
但是,它确实可以通过触摸模拟在我的 Surface Pro 3 上的 IE11 桌面上工作 Windows Phone...所以这一定是真正的 IE11 的一个非常具体的问题 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>
谢谢
我觉得 非常 愚蠢 post 我自己的问题的答案,但我设法让它在 Cordova 中工作,这是我的错误。我从评论中得到的线索让我意识到我可能 exporting/building 项目不正确。
我使用的是 wp8 平台,而不是(通用)windows 平台,这意味着整个项目并不是 100% 兼容 WP8.1 上的 IE,因为 wp8 平台依赖于网络视图...
我在做什么:
cordova platform add wp8 -> cordova build wp8 -> open the .sln file, change the target平台到 wp8.1 -> 部署到设备
我现在在做什么:
cordova 平台添加 windows -> cordova 构建 windows -- --phone -> 打开 .sln 文件
现在一切正常。
另一方面,如果没有 cordova.js,我仍然无法直接在 IE11 上运行它,所以我猜这是 Hammer.js 的问题,而不是 Onsen- UI,尽管它依赖于它,这让我感到困惑。但这完全是另一个问题。
我一直在尝试让 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>
或者在实际 http 请求有效的 CodePen 中 http://codepen.io/onsen/pen/WbJogM/ (不知道为什么它不在这里)
它在浏览器上工作得很好,甚至在 Chrome 上使用 Ripple 模拟器,但是当使用 Cordova 构建和 Visual Studio 部署到我的设备时,下拉刷新操作没有完全没有工作。
其他一切正常,点击、输入、滚动等。只是下拉刷新不起作用。有其他遇到此问题的人 and/or 找到了解决方案吗?
我尝试更改不同的样式,也尝试禁用过度滚动但没有成功,我已经搜索了好几天了。
编辑 1:
它也不适用于 IE11/Edge 直接访问它,所以我的猜测是这个问题一般与 IE11/Edge 有关,与 Cordova 本身或 visual studio部署。
编辑 2:
但是,它确实可以通过触摸模拟在我的 Surface Pro 3 上的 IE11 桌面上工作 Windows Phone...所以这一定是真正的 IE11 的一个非常具体的问题 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>
谢谢
我觉得 非常 愚蠢 post 我自己的问题的答案,但我设法让它在 Cordova 中工作,这是我的错误。我从评论中得到的线索让我意识到我可能 exporting/building 项目不正确。
我使用的是 wp8 平台,而不是(通用)windows 平台,这意味着整个项目并不是 100% 兼容 WP8.1 上的 IE,因为 wp8 平台依赖于网络视图...
我在做什么:
cordova platform add wp8 -> cordova build wp8 -> open the .sln file, change the target平台到 wp8.1 -> 部署到设备
我现在在做什么:
cordova 平台添加 windows -> cordova 构建 windows -- --phone -> 打开 .sln 文件
现在一切正常。
另一方面,如果没有 cordova.js,我仍然无法直接在 IE11 上运行它,所以我猜这是 Hammer.js 的问题,而不是 Onsen- UI,尽管它依赖于它,这让我感到困惑。但这完全是另一个问题。