我有一个项目,我想让用户按住一个按钮两秒钟,然后处理"点击"并将它们重定向到另一个页面。
它在iOS上完美运行,但在Android上,everthing完美直到你释放你按下的按钮,即使重定向成功发生,释放按钮将您发回到您按住按钮的上一页。
如果我继续按住按钮5秒左右,它不会重定向我并正常工作。
我唯一能想到的是"发布" Android正在处理操作,作为上一页的操作,并将我重定向回按钮"所属的页面"到。
以下是代码:
.controller('EmergencyCtrl', function($scope, $rootScope, $ionicLoading, $state, $ionicPopup, $ionicHistory) {
$scope.held_for = 0;
$scope.holding = false;
$scope.interval;
$scope.max = 1800;
$scope.is_tap = false;
var loader = document.getElementById('loader');
var boarder = document.getElementById('border');
var α = 0;
var π = Math.PI;
var t = 30;
$scope.tap = function(event) {
$scope.is_tap = true;
$scope.tap_interval = setInterval(function(){
α += 2;
console.log(α);
α %= 92;
var r = ( α * π / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( α > 180 ) ? 1 : 0
, anim = 'M 0 0 v -125 A 125 125 1 '
+ mid + ' 1 '
+ x + ' '
+ y + ' z';
document.getElementById('loader').setAttribute( 'd', anim );
document.getElementById('border').setAttribute( 'd', anim );
// setTimeout(draw, t); // Redraw
if (α >= 90)
{
$scope.holding = false;
clearInterval($scope.tap_interval);
$scope.held_for = 0;
$ionicLoading.hide();
α = 0;
}
}, 1);
$ionicLoading.show({
// The text to display in the loading indicator
// template: '<round-progress max="{{max}}" current="{{held_for}}" color="#ef473a" bgcolor="#eaeaea" radius="50" stroke="50" semi="false" rounded="false" clockwise="true" responsive="false" duration="800" animation="easeInOutQuart" animation-delay="0"></round-progress><br>Continue holding <br>to report emergency.',
templateUrl: 'templates/loading.html',
scope: $scope,
// The animation to use
animation: 'fade-in',
// Will a dark overlay or backdrop cover the entire view
showBackdrop: true,
// The maximum width of the loading indicator
// Text will be wrapped if longer than maxWidth
minWidth: 250,
// The delay in showing the indicator
showDelay: 0,
delay: 0,
// Hide when we switch to the broad cast page.
hideOnStateChange: true
});
}
$scope.hold = function(event) {
$scope.is_tap = false;
// $scope.holding = true;
$scope.interval = setInterval(function(){
$scope.held_for += 1;
if ($scope.held_for >= 180)
{
$state.go('nofoot.broadcast');
}
α += 2;
// console.log(α);
α %= 360;
var r = ( α * π / 180 )
, x = Math.sin( r ) * 125
, y = Math.cos( r ) * - 125
, mid = ( α > 180 ) ? 1 : 0
, anim = 'M 0 0 v -125 A 125 125 1 '
+ mid + ' 1 '
+ x + ' '
+ y + ' z';
document.getElementById('loader').setAttribute( 'd', anim );
document.getElementById('border').setAttribute( 'd', anim );
// setTimeout(draw, t); // Redraw
}, 1);
$ionicLoading.show({
// The text to display in the loading indicator
// template: '<round-progress max="{{max}}" current="{{held_for}}" color="#ef473a" bgcolor="#eaeaea" radius="50" stroke="50" semi="false" rounded="false" clockwise="true" responsive="false" duration="800" animation="easeInOutQuart" animation-delay="0"></round-progress><br>Continue holding <br>to report emergency.',
templateUrl: 'templates/loading.html',
scope: $scope,
// The animation to use
animation: 'fade-in',
// Will a dark overlay or backdrop cover the entire view
showBackdrop: true,
// The maximum width of the loading indicator
// Text will be wrapped if longer than maxWidth
minWidth: 250,
// The delay in showing the indicator
showDelay: 0,
delay: 0,
// Hide when we switch to the broad cast page.
hideOnStateChange: true
});
}
$scope.release = function(event) {
if ($scope.is_tap == false)
{
$scope.holding = false;
clearInterval($scope.interval);
$scope.held_for = 0;
$ionicLoading.hide();
α = 0;
}
}
})
有人会认为,一旦你告诉Ionic重定向释放上一页的按钮保持不会发送回你,所以我猜这是一个错误。我们已经尝试了十几种不同的解决方法来绕过它,但似乎没有任何效果。有什么想法吗?