混合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>
-
-
![](//image109.360doc.cn/DownloadImg/2018/04/2511/131179136_1_20180425110707316)
单看这一个水平画廊是没有什么问题的,功能和操作都很正常。但是我们项目中遇到一个问题:一个页面很大,有多个画廊控件,我们的页面很难上下滑动,滑动非常吃力,这是为什么呢?举个例子:如果你的页面放的全都是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>
-
-
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。