Задержка включения/исключения изображения в скроллер

Question

Постановка задачи:

Я создаю IOS App от Angularjs используя нг-Cordova плагин, Для моего проекта я использую горизонтальный скроллер (как Размах), Всякий раз, когда я пытаюсь выбрать/Отменить выбор изображения, это ответ задерживается. Я использовал $ watch() для просмотра изменений для моего объекта области $ scope. Я не могу определить, где проблема поднимается, будь то в my css либо в мой контроллер .P в аренду любой может помочь мне устранить проблему.

Markup:

<div class="wrapper no-copy"> 
<div class="internal" ng-repeat="pf in printlist"><img class="" ng-click="pf.selectFile = !pf.selectFile ;showCustom($event,pf)" ng-src="{{pf.imagePath}}"><div class="no-copy filedetail"><div style="color:black;margin-left:7px;" class=" no-copy internal font-filedetail">{{pf.filename.substring(0,8)}}..</br>Pages: {{pf.totalPages}}</br>{{pf.releaseCode}}</div><div class="internal filedetailbar"><img style="height:70px;" src="images/beacon/line_icon.png"></div></div> 
</div> 
</div> 

CSS:

.wrapper { 
    width: 100%; 
    white-space: nowrap; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    -webkit-overflow-scrolling: touch; 
    padding: 1rem; 
    background-color: white; 
    // Toggle this depending upon whether you want to see the scrollbar 
    &::-webkit-scrollbar { 
    display: none; 
    } 
} 

.internal { 
    display: inline; 
} 

Контроллер:

$scope.showCustom = function (event, detail) { 
      console.log('detail') 
      console.log(detail) 
      /*$mdDialog.show({ 
      locals: {name: detail}, 
      clickOutsideToClose: true, 
      scope: $scope, 
      preserveScope: true, 
      templateUrl: 'ibprintProcessList/filedetail.html', 
      controller: function DialogController($scope, $mdDialog, name) {*/ 

      $scope.del = detail; 
      console.log($scope.del.color) 
      console.log('*************') 
      console.log($scope.del) 
      if (!$scope.del.color) { 
       $scope.color = false 
      } 
      if ($scope.del.selectFile) { 
       $scope.filestatus = 'selected ' 
       $scope.disabled = false 
       $scope.isFileSelect = $scope.isFileSelect + 1 
       $scope.selectfileextension = $scope.del.filename.split('.') 
       console.log('???????????????') 
       console.log($scope.selectfileextension[1]) 
       if (($scope.selectfileextension[1] == 'pdf') || ($scope.selectfileextension[1] == 'rtf')) { 
        $scope.del.imagePath = "./images/beacon/pdf_icon_select.png" 
       } 
       else if (($scope.selectfileextension[1] == 'doc') || ($scope.selectfileextension[1] == 'docx')) { 
        $scope.del.imagePath = "./images/beacon/word_icon_select.png" 
       } 
       else if (($scope.selectfileextension[1] == 'xls') || ($scope.selectfileextension[1] == 'xlsx')) { 
        $scope.del.imagePath = "./images/beacon/xls_icon_select.png" 
       } 
       else if (($scope.selectfileextension[1] == 'ppt') || ($scope.selectfileextension[1] == 'pptx')) { 
        $scope.del.imagePath = "./images/beacon/pp_icon_select.png" 
       } 
       else if (($scope.selectfileextension[1] == 'png') || ($scope.selectfileextension[1] == 'jpg') || ($scope.selectfileextension[1] == 'jpeg') || ($scope.selectfileextension[1] == 'bmp') || ($scope.selectfileextension[1] == 'gif') || ($scope.selectfileextension[1] == 'tiff') || ($scope.selectfileextension[1] == 'tif')) { 
        $scope.del.imagePath = "./images/beacon/image_icon_select.png" 
       } 
      } 
      else { 
       $scope.disabled = true 
       $scope.isFileSelect = $scope.isFileSelect - 1 
       $scope.filestatus = 'unselected ' 
       $scope.selectfileextension = $scope.del.filename.split('.') 
       if (($scope.selectfileextension[1] == 'pdf') || ($scope.selectfileextension[1] == 'rtf')) { 
        $scope.del.imagePath = "./images/beacon/pdf_icon.png" 
       } 
       else if (($scope.selectfileextension[1] == 'doc') || ($scope.selectfileextension[1] == 'docx')) { 
        $scope.del.imagePathh = "./images/beacon/word_icon.png" 
       } 
       else if (($scope.selectfileextension[1] == 'xls') || ($scope.selectfileextension[1] == 'xlsx')) { 
        $scope.del.imagePath = "./images/beacon/xls_icon.png" 
       } 
       else if (($scope.selectfileextension[1] == 'ppt') || ($scope.selectfileextension[1] == 'pptx')) { 
        $scope.del.imagePath = "./images/beacon/pp_icon.png" 
       } 
       else if(($scope.selectfileextension[1] == 'png') || ($scope.selectfileextension[1] == 'jpg') || ($scope.selectfileextension[1] == 'jpeg') || ($scope.selectfileextension[1] == 'bmp') || ($scope.selectfileextension[1] == 'gif') || ($scope.selectfileextension[1] == 'tiff') || ($scope.selectfileextension[1] == 'tif')){ 
        $scope.del.imagePath = "./images/beacon/image_icon.png" 
       } 
      } 

      /*$scope.closeDialog = function() { 
      $mdDialog.hide(); 
      //$scope.printNow() 
      }*/ 
      $scope.del.$digest() 
      $scope.printlist.$digest() 
      console.log('Watch function starts') 
     // $scope.$watch($scope.del, $scope.showCustom); 
     $scope.$watchGroup(['$scope.del', '$scope.printlist'],$scope.showCustom,true) 
     console.log('Watch function ends') 
     } 

Когда пользователь Select/Deselect $ scope.showCustom (событие, пф) срабатывает объект пф передается в контроллер и назначен объект пф до $ scope.del объекта

Когда пользователь Select/Отмените $ scope.del.imagepath держит изображения и изменить источник изображения

Referimage: Screen Shot

Я попытался как $ часы() и $ watchGroup() функции, которые он получает задержку на Select/Deselect

Answer 1

Just используйте простой горизонтальный скроллер с использованием стиля переполнения, он будет работать как SWIPE в вашем мобильном приложении.

-webkit-overflow-scrolling: touch; 
&::-webkit-scrollbar { 
    display: none; 
    } 

удаленный вышеуказанный CSS, поскольку вы переносите из Интернета в мобильное приложение. -webkit-overflow-scrolling для браузера. иногда он может/не работать, пока вы конвертируете свое веб-приложение в мобильное приложение.

Вместо этого добавьте ниже CSS:

overflow-y: hidden; 
overflow-x: scroll; 
width: 500px;   // you can change the width size depends on you 
white-space: nowrap;