离子框架 - 输入输入时在 Android 中屏幕闪烁

Question

HTML 部分

<ion-view  cache-view="false" view-title="" hide-nav-bar="true">
<ion-content class="padding input-center" style="background: url(img/background.jpg) center; background-size: cover;" ng-show="viewEntered">
<div class="row responsive-sm padding remvoeBP">
  <div class="col">
    <div class="app-logo"><img src="img/logo.png"></div> 

    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col">
            <label class="item item-input" ng-hide="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;">
              <i class="icon ion-location placeholder-icon" style="color:black;"></i>
              <input type="text" placeholder="City" ng-change="searchCity(city_suggestion)" ng-model="city_suggestion">
            </label>

            <label class="item item-input" ng-show="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;">
              <i class="icon ion-location placeholder-icon" style="color:black;"></i>
              <input type="text" ng-click="changeCity()" ng-model="cityName">
            </label>

            <div ng-show="cityList" class="list">
              <li class="item" ng-click="selectedCity(city.city_id, city.name)" ng-repeat="city in searchCityList" >{{city.name}}</li>
              <input type="hidden" name="cityId" ng-value="cityId"/>
            </div>

          </div>
        </div>

        <div class="row">
          <div class="col" >
            <label class="item item-input" ng-hide="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;">     
              <i class="icon ion-android-navigate placeholder-icon" style="color:black;"></i>
              <input type="text" placeholder="Area" ng-change="searchArea(area_suggestion)" ng-model="area_suggestion">
            </label>

           <label class="item item-input" ng-show="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;">
              <i class="icon ion-android-navigate placeholder-icon" style="color:black;"></i>
             <input type="text" ng-click="changeArea()" ng-model="areaName">
           </label>

           <div ng-show="areaList" class="list">
             <li class="item" ng-click="selectedArea(area.area_id, area.name)" ng-repeat="area in searchAreaList">{{area.name}}</li>
           </div>

          </div>
        </div>

        <button class="button icon-left ion-android-search login-button-center" style="background-color:#AD1114;" ng-click="searchRestaurant(cityId,areaId)">
          Search
        </button>

      </div>
    </div>
  </div>
</div>

我的控制器代码

angular.module('starter.locationControllers', [])

.controller('LocationCtrl', function($scope, $state, $http, $ionicPopup, baseUrl, $ionicLoading) {

  $scope.$on("$ionicView.enter", function () { 
    $scope.viewEntered = true; 
  });
  $scope.$on("$ionicView.beforeLeave", function () { 
    $scope.viewEntered = false; 
  });

  $ionicLoading.show({
    template:'<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
  });

  $http({
method : "POST",
url : baseUrl+"user_id="+localStorage.getItem('user_id')+"&methodName=cart.clear"
   }).then(function mySucces(response) {

$ionicLoading.hide();

$scope.cityList = false;
$scope.showCity = false;
$scope.city_suggestion = '';
$scope.cityId = '';
$scope.areaId = '';

$scope.searchCity = function(city_suggestion) {
  $ionicLoading.show({
    template:'<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
  });

  $http.get(baseUrl+'methodName=city.suggestion&query='+city_suggestion, { cache: true}).then(function(response) {
    $ionicLoading.hide();
    $scope.cityList = true;
    $scope.searchCityList = response.data.responseMsg;
  });
};  

$scope.selectedCity = function(cityId, cityName) {
  $scope.showCity = true;
  $scope.cityList = false;
  $scope.cityName = cityName;
  $scope.cityId = cityId;
}

$scope.changeCity = function() {
  $scope.city_suggestion = {};
  $scope.cityName = {};
  $scope.showCity = false;
}

$scope.areaList = false;
$scope.showArea = false;
$scope.area_suggestion = '';

$scope.searchArea = function(area_suggestion) {

  $ionicLoading.show({
    template:'<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
  }); 

  $http.get(baseUrl+'methodName=area.suggestion&city_id='+$scope.cityId+'&query='+area_suggestion, { cache: true}).then(function(response) {
    $ionicLoading.hide();
    $scope.areaList = true;
    $scope.searchAreaList = response.data.responseMsg;
  });
};  

$scope.selectedArea = function(areaId, areaName) {
  $scope.showArea = true;
  $scope.areaList = false;
  $scope.areaName = areaName;
  $scope.areaId = areaId;
}

$scope.changeArea = function() {
  $scope.area_suggestion = {};
  $scope.areaName = {};
  $scope.showArea = false;
} 

$scope.searchRestaurant = function(cityId, areaId) {

  if(cityId == '') {
    var alertPopup = $ionicPopup.alert({
      title: 'Dear User',
      template: 'Please select city.'
    });

    return false;
  }

  if(areaId == '') {
    var alertPopup = $ionicPopup.alert({
    title: 'Dear User',
      template: 'Please select area.'
    });

    return false;
  }

  window.localStorage.removeItem("cityId");
  window.localStorage.removeItem("areaId");

  localStorage.setItem('cityId', cityId);
  localStorage.setItem('areaId', areaId);

  $state.go('restaurantList', {cityId: cityId, areaId:areaId});
}

});

});

系统信息

您的系统信息：

 ordova CLI: 6.4.0
 Ionic CLI Version: 2.1.13
 Ionic App Lib Version: 2.1.7
 ios-deploy version: Not installed
 ios-sim version: Not installed
 OS: Windows 10
 Node Version: v7.2.0
 Xcode version: Not installed 

我的应用程序屏幕在输入时闪烁。我参考了一些链接，但我仍然遇到这个问题。更多详情请点击此处https://www.youtube.com/watch?v=XGOrjMK6gmM&feature=youtu.be。

Answer 1

输入元素必须在 form 标签内，如

<form id="calcForm" name="calcForm">
    ...... Input fields......
</form>

也不要在 ion-view 中将 view-title 留空。

Answer 2

添加这两个属性以防止闪烁效果：

-webkit-transform-style: preserve-3d;   
-webkit-backface-visibility: hidden;

也适用于没有为相同修复设置动画的闪烁元素。

Answer 3

屏幕闪烁可能是由于身份验证检查问题。例如，当您注销但您的代码仍然检查您的数据是否存在于实际上可能存在的存储中。

在Chrome浏览器上，我建议你去更多工具->开发者工具->应用程序。然后选择你的离子存储和清除数据库。

Answer 4

imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp,{
    scrollPadding: false,
    scrollAssist: true,
    autoFocusAssist: false
  })
],

文件：app.modules.ts