Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/372.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 延迟选择/取消选择滚动条中的图像_Javascript_Html_Css_Angularjs_Swipe - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 延迟选择/取消选择滚动条中的图像

Javascript 延迟选择/取消选择滚动条中的图像

javascript html css angularjs

Javascript 延迟选择/取消选择滚动条中的图像,javascript,html,css,angularjs,swipe,Javascript,Html,Css,Angularjs,Swipe,问题陈述： <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 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>

.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')
        }
我正在使用ng cordova插件从Angularjs创建IOS应用程序，在我的项目中，我使用水平滚动条（如滑动），每当我尝试选择/取消选择图像时，它的响应都会延迟。我使用$watch（）查看我的$scope对象的更改。无论是在我的css中还是在我的控制器中，我都无法确定问题出现的位置。请任何人帮助我解决此问题

标记：

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

.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')
        }
控制器：

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

.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')
        }
当用户选择/取消选择$scope时，将触发showCustom（事件，pf） pf对象被传递给控制器，并将pf对象分配给$scope.del对象

当用户选择/取消选择时，$scope.del.imagepath保存图像并更改图像源

参考图片：

我尝试了$watch（）和$watchGroup（）函数，它在选择/取消选择时会有延迟

只要使用一个简单的水平滚动条，使用溢出样式，它就可以在你的移动应用程序上滑动

-webkit-overflow-scrolling: touch;
 &::-webkit-scrollbar {
    display: none;
  }
删除了上面的CSS，因为您正在从web移植到移动应用程序-webkit溢出滚动适用于浏览器。有时，当您将web应用程序转换为移动应用程序时，它可能/可能不起作用

-webkit-overflow-scrolling: touch;
 &::-webkit-scrollbar {
    display: none;
  }
而是添加以下CSS：

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