ionic-scroll,页面难以上下滑动的解决方案

最新推荐文章于 2022-09-22 09:04:40 发布

Generon

最新推荐文章于 2022-09-22 09:04:40 发布

阅读量5.9k

点赞数

分类专栏： ionic开发

本文链接：https://blog.csdn.net/Generon/article/details/72637516

版权

在混合app开发中，使用Ionic的指令创建水平滑动画廊功能。然而，当页面包含多个此类控件时，页面上下滑动变得困难。原因是输入框或会捕获滑动事件。为解决此问题，可以不使用，而是通过监听touchmove和touchstart事件，自定义左右滑动行为，实现顺畅的页面滚动。

摘要由CSDN通过智能技术生成

混合app开发使用ionic框架的<ion-scroll>指令能够方便地实现水平滚动和垂直滑动。比如我们想实现一个能够水平滑动的画廊，可以使用下面这段代码。

[html]view plaincopy 
   
 <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">  

最低0.47元/天解锁文章

Generon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ionic-scroll,页面难以上下滑动的解决方案

混合app开发使用ionic框架的指令能够方便地实现水平滚动和垂直滑动。比如我们想实现一个能够水平滑动的画廊，可以使用下面这段代码。[html] view plain copyhtml> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8
复制链接

扫一扫

专栏目录