使用ionic框架的<ion

昨夜雾浓 2018-04-25

展开全文

混合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事件实现滚动：

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