使用ionic框架的<ion

昨夜霧濃 2018-04-25

展開全文

混合app開發(fā)使用ionic框架的<ion-scroll>指令能夠方便地實現(xiàn)水平滾動和垂直滑動。比如我們想實現(xiàn)一個能夠水平滑動的畫廊，可以使用下面這段代碼。

<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>指令，自己實現(xiàn)左右滑動。利用HTML5中的touchmove和touchstart事件實現(xiàn)滾動：

[javascript] view plain copy

print?

// 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] view plain copy

print?

<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">
<img ng-src="{{each}}" ng-repeat="each in pictures"></img>
</div>
</ion-content>
<ion-footer-bar class="bar-balanced">
<div class="title">Footer</div>
</ion-footer-bar>
</body>
</html>