使用ionic框架的進行水平滾動時，導致頁面難以上下滑動的解決方案
阿新 • • 發佈：2019-02-09
混合app開發使用ionic框架的<ion-scroll>指令能夠方便地實現水平滾動和垂直滑動。比如我們想實現一個能夠水平滑動的畫廊，可以使用下面這段程式碼。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-1.11.1.min.js"></script> <script src="./1.1.1-release/js/ionic.bundle.js"></script> <link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" /> <style> /*nowrap不讓img換行*/ .picturesholder{ background-color:#fff; margin:20px; width:400px; height:80px; overflow: hidden; white-space: nowrap; } /**圖片佔滿畫廊*/ .picturesholder img{ width:100px; height:81px; } </style> <script> var testModule = angular.module('testApp', ['ionic']); testModule.controller('MyController', function($scope, $ionicScrollDelegate) { $scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.png","imgs/8.png"]; }); $(function(){ angular.bootstrap($("#body"), ["testApp"]); }) </script> </head> <body id="body" ng-controller="MyController"> <ion-header-bar class="bar-positive"> <h1 class="title">bar-positive</h1> </ion-header-bar> <ion-content class="has-header" style="background-color: #ebebeb;"> <div class="picturesholder"> <ion-scroll direction="x"> <img ng-src="{{each}}" ng-repeat="each in pictures"></img> </ion-scroll> </div> </ion-content> <ion-footer-bar class="bar-balanced"> <div class="title">Footer</div> </ion-footer-bar> </body> </html>
單看這一個水平畫廊是沒有什麼問題的，功能和操作都很正常。但是我們專案中遇到一個問題：一個頁面很大，有多個畫廊控制元件，我們的頁面很難上下滑動，滑動非常吃力，這是為什麼呢？舉個例子：如果你的頁面放的全都是input輸入控制元件，那麼這個頁面一樣很難滑動，因為當我們在手機螢幕上滑動的時候，一不小心很容易就會點中這些輸入框，當輸入框獲得焦點，頁面就不能滑動了。使用<ion-scroll>一樣有這個問題，當頁面全是畫廊控制元件的時候，滑動也十分費勁。
從ionic文件中也沒有找到好的解決辦法，最後解決方法是：不使用<ion-scroll>指令，自己實現左右滑動。利用HTML5中的touchmove和touchstart事件實現滾動：
// do for left-right scroll var startX = 0; var startY = 0; var $gallery = $(".picturesholder"); $gallery.on("touchstart", function(e) { startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $gallery.on("touchmove", function(e) { var X = e.originalEvent.changedTouches[0].pageX - startX; var Y = e.originalEvent.changedTouches[0].pageY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { var cur_scroll = $(this).scrollLeft(); $(this).scrollLeft(parseInt(cur_scroll) - X); e.preventDefault(); e.stopPropagation(); } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { var cur_scroll = $(this).scrollLeft(); $(this).scrollLeft(parseInt(cur_scroll) - X); e.preventDefault(); e.stopPropagation(); } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { } else{ } }); // do for left-right scroll
web瀏覽器沒有上面2個事件，我們可以用mousedown和mousemove模擬，下面程式碼一樣可以左右滑動。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.11.1.min.js"></script>
<script src="./1.1.1-release/js/ionic.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
<style>
/*nowrap不讓img換行*/
.picturesholder{
background-color:#fff;
margin:20px;
width:400px;
height:80px;
overflow: hidden;
white-space: nowrap;
}
/**圖片佔滿畫廊*/
.picturesholder img{
width:100px;
height:81px;
}
</style>
<script>
var testModule = angular.module('testApp', ['ionic']);
testModule.controller('MyController', function($scope, $ionicScrollDelegate) {
$scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.png","imgs/8.png"];
});
$(function(){
angular.bootstrap($("#body"), ["testApp"]);
// do for left-right scroll
var startX = 0;
var startY = 0;
var $pictures = $(".picturesholder");
$pictures.on("mousedown", function(e) {
startX = e.originalEvent.pageX,
startY = e.originalEvent.pageY;
});
$pictures.on("mousemove", function(e) {
var X = e.originalEvent.pageX - startX;
var Y = e.originalEvent.pageY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
var cur_scroll = $(this).scrollLeft();
$(this).scrollLeft(parseInt(cur_scroll) - X);
e.preventDefault();
e.stopPropagation();
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
var cur_scroll = $(this).scrollLeft();
$(this).scrollLeft(parseInt(cur_scroll) - X);
e.preventDefault();
e.stopPropagation();
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
}
else{
}
});
// do for left-right scroll
})
</script>
</head>
<body id="body" ng-controller="MyController">
<ion-header-bar class="bar-positive">
<h1 class="title">bar-positive</h1>
</ion-header-bar>
<ion-content class="has-header" style="background-color: #ebebeb;">
<div class="picturesholder">
<!--<ion-scroll direction="x">-->
<img ng-src="{{each}}" ng-repeat="each in pictures"></img>
<!--</ion-scroll>-->
</div>
</ion-content>
<ion-footer-bar class="bar-balanced">
<div class="title">Footer</div>
</ion-footer-bar>
</body>
</html>