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

Posted 2023-05-07

【中文标题】离子框架 - 输入输入时在 Android 中屏幕闪烁

【英文标题】：Ionic framework- Screen flickering in Android when entering the inputs

【发布时间】：2017-05-05 07:31:12

【问题描述】：

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- 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- 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- 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。

【参考方案1】：

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

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

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

【讨论】：

在离子视图中像这样使用 内容。有时缓存可能会导致问题

【参考方案2】：

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

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

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

【讨论】：

感谢您的回答。我需要在哪里添加这些代码。

将此代码添加到闪烁元​​素的父节点。有时您可能还需要将其添加到子节点中。

【参考方案3】：

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

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

【参考方案4】：

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

文件：app.modules.ts