09:56 提问
ion-scroll开启横向滑动的时候,影响ion-content的垂直滚动怎么解决
ion-scroll开启横向滑动的时候,影响ion-content的垂直滚动怎么解决
按赞数排序
你好，请问你这个问题解决了吗，它现在还一直困扰着我...
具体是什么意思，我有做过一个页面：头部是横向tab栏，可以横向滑动。垂直方面的页面是使用上拉加载可以向上滚动，不会有冲突。
其他相关推荐1399人阅读
ionic（7）
转载请注明出处处：
　　在移动端受屏幕大小所限，展示内容很多的时候，就要使部分区域进行滑动。本文展示项目中所有到的几种方式，大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理，有两个容器A、B,假如A在外层，B在内层；外层的A宽度或高度固定，内层容器B宽度或者高度大于A即可实现滚动。
2 实现方式
1. ion-scroll
利用ionic自带的滑动指令　
view-title="Dashboard"&
class="padding" has-bouncing="false"&
has-bouncing="false" style="width:100border:solid 1" direction="x"&
style="width:200"&
ion-scroll实现滑动，用ionic自带的滑动组件实现滑动，ion-scroll其他属性可参考官网文档
2. css的overflow
view-title="Dashboard"&
class="padding" has-bouncing="false"
overflow-scroll="true"&
style="width:160height:300border:solid 1overflow:padding:20"&
style="width:400height:500border:solid 1px blueviolet"&
使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
注：使用这种方式，ion-content需要添加overflow-scroll="true"指令，表示使用系统自己的滚动来代替ionic的scroll，ionic是实现了自己的一套滚动方式的。
3. 监听touch事件
style="width:100%;border:solid 1height:60overflow:white-space:padding:10px 20" id="dash_scroll_container"&
ng-repeat="d in datas" style="margin-right:20border:solid 1px #FFC900;height:100%;width:100display:inline-text-align:line-height:40"&
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
$scope.datas=[1,2,3,4,5,6,7,8,9,10];
var startX=0,startY=0;
var $domScroll=$("#dash_scroll_container");
$domScroll.on("touchstart",function(e){
startX=e.originalEvent.changedTouches[0].pageX;
startY=e.originalEvent.changedTouches[0].pageY;
console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
$domScroll.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)) {
scrollLeft($(this),x);
}else if( Math.abs(y) & Math.abs(x)){
scrollTop($(this),y);
function scrollLeft(obj,x){
var currentScroll = obj.scrollLeft();
console.log(parseInt(currentScroll)-x);
obj.scrollLeft(parseInt(currentScroll)-x);
e.preventDefault();
e.stopPropagation();
function scrollTop(obj,y){
var currentScroll = obj.scrollTop();
console.log(parseInt(currentScroll)-y);
obj.scrollTop(parseInt(currentScroll)-y);
e.preventDefault();
e.stopPropagation();
通过监听手指的touchstart、touchmove事件，获得滑动的距离，调用外部容器div的滚动条滚动到对应距离。
$(selector).scrollLeft(position)：设置元素的水平滚动位置
$(selector).scrollTop(position)：设置元素的垂直滚动位置
最后，再使用angularjs的指令，讲滚动的监听封装为一个指令，方便以后滑动时候使用。
在directive.js中添加：
angular.module('starter.directives', [])
.directive('myScroll',function(){
function link($scope, element, attrs) {
var $domScroll=$(element[0]);
var startX=0,startY=0;
$domScroll.on("touchstart",function(e){
startX=e.originalEvent.changedTouches[0].pageX;
startY=e.originalEvent.changedTouches[0].pageY;
console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
$domScroll.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)) {
scrollLeft($(this),x);
}else if( Math.abs(y) & Math.abs(x)){
scrollTop($(this),y);
function scrollLeft(obj,x){
var currentScroll = obj.scrollLeft();
console.log(parseInt(currentScroll)-x);
obj.scrollLeft(parseInt(currentScroll)-x);
e.preventDefault();
e.stopPropagation();
function scrollTop(obj,y){
var currentScroll = obj.scrollTop();
console.log(parseInt(currentScroll)-y);
obj.scrollTop(parseInt(currentScroll)-y);
e.preventDefault();
e.stopPropagation();
restrict: 'A',
link: link
这样封装后使用起来就方便了，在需要滑动的元素上加上指令 my-scroll。
my-scroll style="border:slateblue solid 1width:100%;height:300overflow:margin:0;padding:0;" class="row"&
class="col-20"&
ng-repeat="d in datas" style="margin-bottom:20border:solid 1px #007AFF;height:80text-align:line-height:80"&
class="col-80"&
style="width:200%;border:solid 1px #009689;overflow:white-space:"&
ng-repeat="d in datas" style="margin-bottom:20border:solid 1px #FFC900;height:80text-align:line-height:80"&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35075次
排名：千里之外
原创：13篇
(1)(1)(5)(6)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'Ionic 常见问题及解决方案 - 简书
Ionic 常见问题及解决方案
在Ionic开发过程中会遇到很多常见的开发问题，分享一下笔者在开发过程中总结到的对这些问题的解决方案。也是接触ionic没多久，大家一起努力,有问题欢迎评论指出 :)
ps: 附上博客的
一些常识与技巧
list 有延迟，可以在ion-content处使用 overflow-scroll="true"尝试
在&i&上用ng-click上是没效果的
&label&标签内的事件会在整个label内被触发，点哪都触发
快捷修改背景色style="background-color: #212326;"
能用ng-if就用ng-if,ng-if的效率比ng-show和ng-hide高
直接在ion-list中的ion-item中并不能触发ng-click事件，可以在item中的元素上再套一层div
可以用ng-class="{'important': post.important}"配合css 根据列表元素显示不同的效果
获取日期用$filter，var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');
列表中的元素不能写成 id : 4，应写成 id : "4",注意在创建id变量的时候也需要转成string,如var id = InfoListService.getListLength()+1+"";
使用$log进行log输出,为什么用$log而不是console.log呢？可以看看
在安卓上的体验比较差，动画有延迟？可以试试
controllers和services 的文件名可能会重合，但是他们意义差不多，可以将controllers中的文件名小写，对应的services中的文件名大写进行区分,或者加后缀xxxControler,xxxService
[如何在某个界面中去掉导航栏?]
[如何在ionic中加载本地图片?]
[如何在ionic中嵌入网页代码?]
[如何将template加载到某个tab或某个sidemenu项目下?]
[用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?]
[加载页面的时候会看到双括号一闪而过？]
[更新了数据，如何让界面更新呢？]
[如何实现IonicView中card上面有一列分割线的效果?]
[controller.js和service.js文件越来越大怎么办?]
[如何寻找优秀的范例代码?]
[如何显示相对时间？]
[发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?]
[如何在列表右下方添加时间等信息?]
[如何回到上一页面?]
[如何关闭应用?]
[在安卓设备上如何让title居中?]
[如何让在sidemenu中的headerbar能够显示头像等其他信息?]
[ionic的subheader挡住了内容区域怎么办?]
[对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?]
[ionic如何处理回退按钮？例如询问用户是否真的要退出应用]
[ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?]
[ionic如何实现搜索框内的全部清除按钮?]
如何在某个界面中去掉导航栏?
如果某个界面上不想要导航栏，可以简单地在最顶端的标签中添加hide-nav-bar="true"
如何在ionic中加载本地图片?
对于css文件夹中的样式文件中如果要调用本地的图片的话,从该css文件所在的文件夹开始算,例如www/css/style.css要加../,否则在浏览器中可以正常显示，在设备上不行，结构如下所示：
.login-page {
background:url(../img/signup_bg.png);
background-size:
background-repeat: no-
但是对于在页面中定义的图片路径，从www路径开始算,否则浏览器中可显示，但设备上不行,img文件夹和index.html在一级,如：
&img src="img/commander.jpg"&
如何在ionic中嵌入网页代码?
使用ng-bind-html这个类,不过它会过滤原始html的标签，我们可以引入$sce模块，用$sce.trustAsHtml()方法信任我们获取的网页
如何将template加载到某个tab或某个sidemenu项目下?
&ion-nav-view name="menuContent"&
可以指定name，然后在子状态中使用该name，ionic就知道该把该状态的template渲染到哪边了。例如：
// signup page
.state('auth.signup', {
url: '/signup',
'auth-signup': {
templateUrl: 'templates/auth-signup.html',
controller: 'SignUpCtrl'
另有一个tabs中声明该auth-signup:
&ion-tab title="Sign Up" icon-on="ion-ios-personadd"
icon-off="ion-ios-personadd-outline" href="#/auth/signup"&
&ion-nav-view name="auth-signup"&&/ion-nav-view&
&/ion-tab&
运行serve命令时ionic报错?
ionic $ An uncaught exception occured and has been reported to Ionic
看看你是不还有一个终端在运行着serve呢？
用docker跑ionic的时候，不能把地址绑定到0.0.0.0怎么处理?
可以用ionic serve -all的方法解决
加载页面的时候会看到双括号一闪而过？
angularjs 在使用双括号的时候，第一个加载的页面，也就是应用中的index.html,其未被渲染好的模版可能会被用户看到。用ng-bind就不会遇到这个问题。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容。不过好消息是，在大多数的模版中你依然可以使用双括号.但是对于index.html页面中的数据绑定操作，建议使用ng-bind。
ng-bind使用方式如下: &p ng-bind="greeting"&&/p&
更新了数据，如何让界面更新呢？
可以用广播，注意
如何实现IonicView中card上面有一列分割线的效果?
在css里定义
#info-up {
border-top: 4px solid #f06336;
controller.js和service.js文件越来越大怎么办?
所有的控制器不必都放在controllers.js这一个文件中，可以新建controllers文件夹，
然后把每个controller都建一个&controller&.js文件，同理services和utils等都是.但注意要在index.html中head部分声明.但是为了避免他们相互覆盖，第一个加载的js中模块中要加[...],其他都不需要。如：
// File : /js/directives/mainDirective.js
angular.module('app.directives',[]);
// File : /js/directives/myGreatDirective.js
angular.module('app.directives')
.directive('myGreatDirective', function(){
// File : /js/directives/myBetterDirective.js
angular.module('app.directives')
.directive('myBetterDirective', function(){
看了解更多,嗯这篇文章写的还不是best practice，因为你还得记着自己把[]写到那个模块里了，统一地写在app.js中即可，在app.js最下面加上类似：
angular.module('fcws.controllers',['ionic', 'fcws.services']);
angular.module('fcws.services', []);
可以达到和上面一样的效果，而且可以统一管理.
如何寻找优秀的范例代码?
目前有些ionic 的app没有进行代码混淆，至少ionic官方的ionic view没有进行代码混淆，下载他们的app，文件名改成zip，解压，所有的 www文件都在assets文件夹中，相当于开源了有木有，看看那些最优秀的practice。看中哪些优秀的app，下下来,如何在googleplay上下载？把googleplay应用的地址贴到中。
如何显示相对时间？
如几分钟前，几天前等,，看
发布应用的时候如果遇到翻译错误即MissingTranslation怎么办?
暂时的解决方法是，不进行翻译校正, 在 /platforms/android/build.gradle 中的android {}节中加入:
lintOptions {
disable 'MissingTranslation'
disable 'ExtraTranslation'
如何在列表右下方添加时间等信息?
span 可以用来将时间之类的附加信息显示到列表右边,如下面会将创建时间显示在name的右边:
&ion-item class="item item-avatar-left " ng-repeat="message in messages"&
&img src="../../img/commander.jpg"&
&span class="item-note"&{{message.create_at}}&/span&
&h2 &{{message.name}}&/h2&
{{message.content}}&/p&
&/ion-item &
如何回到上一页面?
用$ionicHistory这个模块,引入该模块后使用goBack([backCount])，backCount指定回去多少个页面（-1代表回去一个页面），默认为-1
如何关闭应用?
ionic.Platform.exitApp();
在安卓设备上如何让title居中?
在headerbar中添加align-title="center",如:
&ion-header-bar class="bar-positive" align-title="center"&
&h1 class="title"&{{username}}&/h1&
&/ion-header-bar&
不过这个设置对ion-view无效，亲测，如果要统一让所有navbar上的title居中(包括上面的headerbar)，可以在config里设置,如:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
如果要让某一个view title居中，可以用$ionicNavBarDelegate，参考
如何让在sidemenu中的headerbar能够显示头像等其他信息?
解决方案是去掉headerbar,添加一个avatar到sidemenu content中，如:
&ion-side-menu side="left"&
&ion-content class="bar-positive"&
&ion-list&
&ion-item class="item item-avatar item-positive" href="#"&
&img src="img/commander.jpg"&
&h2 class=" light"&
&i class="icon ion-ios-star"&&/i&{{title}}
&a&{{username}}&/a&
&/ion-item&
ionic的subheader挡住了内容区域怎么办?
解决方案是给&ion-content&加类has-subheader,同理也可以加has-header。如下:
&ion-content class="has-header has-subheader"&
对于需要添加数据的list，在添加数据后页面不能及时刷新造成卡顿怎么办?
可以使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新,记得添加依赖
ionic如何处理回退按钮？例如询问用户是否真的要退出应用
可以在app.js的.run方法中增加对硬件回退按钮的注册处理,这里我在大部分页面都想注册该事件，除去有二级历史页面的我单独判断了下，注意增加依赖。
$ionicPlatform.registerBackButtonAction(function(e) {
var current_state_name = $state.current.
if(current_state_name !== 'sidemenu.post'
&& current_state_name !== 'sidemenu.contact_town' &&
current_state_name !== 'sidemenu.contact_people'){
$ionicPopup.confirm({
title: '退出应用',
template: '您确定要退出xxxx吗?'
}).then(function (res) {
if (res) {
//ionic.Platform.exitApp();
navigator.app.exitApp();
console.log('You are not sure');
e.preventDefault();
navigator.app.backHistory();
ionic如何实现对每个请求都添加认证信息或认证失败自动重新登录?
在应用的注册或者登录部分，不记名token响应了这个请求并且这个token被存储到本地存储中。当你向后端请求一个服务时，你需要把这个token放在头部中。你可以在app.js的.config方法中使用AngularJS的拦截器实现这个。每次请求都会被拦截并且会把认证头部和值放到头部中,同理如果服务器端响应401或403，跳转到重新登录页面.
$httpProvider.interceptors.push(function ($q, $location, User, $rootScope) {
'request': function (config) {
config.headers = config.headers || {};
if (User.getToken()) {
config.headers.Authorization = 'Bearer ' + User.getToken();
'responseError': function (response) {
if (response.status === 401 || response.status === 403) {
//如果之前登陆过
if (User.getToken()) {
$rootScope.$broadcast('unAuthenticed');
return $q.reject(response);
ionic如何实现搜索框内的全部清除按钮?
在label中的input不能嵌入按钮，因为ionic对于label中的tap事件会进行重定向到input上。解决方案是将label替换成span或div。如下面的搜索框，注意ng-model需要是一个对象才能置空,变量不行:
&span class="item-input-wrapper"&
&i class="icon ion-ios-search placeholder-icon"&&/i&
&input type="search" placeholder="请输入姓名前缀" ng-model="search.key"&
&i class="icon ion-close-circled placeholder-icon" style="vertical-align:"
on-tap="clearSearch()" ng-if="search.key.length"&&/i&
轻度强迫症
Nodejs实习生
关注hybird app
主要语言:java,js
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
AngularJS简介：AngularJS 是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。 AngularJS有五个主要核...
ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 ionic ...
0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。 1 创建一个新的Ionic 2 应用 我们将使用有Ionic团队创建的tutorial模板，可见于官方教程，来创建我们的应用程序。要做到这一点，您需要...
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
下载 JSCallOC
密码: cpbq PS.最好用一个UIWebViewController（这样可以拿个控制器都调用这个
都可以同事实现这个方法） 1.把JSCallOC拖到项目 或者po到项目中去
2.创建一个webVIew添加到控制器中...
生活中的我们总会在人生中遇到数不清的人和事。随着时间的不断推移，我们身边的人都在不断变幻着。 感慨着这个世界的匆匆，这个世界的不长情，却也深深明白，不能停下自己的脚步，人生如梦，一个人—在路上。 曾经的我，周围有朋友、同学、闺蜜……有友谊、关爱、照顾，有着他们在我身边，日...
《长远看来，我们都已死去》这本书吸引我看的点，是封面上的一句话：一个重症监护一生对生命最后时日的见证。 重症监护室，对于一般人而言，可以简单理解成“生与死的界限”。很多病人在这儿得到了重生，也有很多病人终究逃离不了死亡。甚至在离开之前承受了别人不能承受的折磨。 人生是一条单...
下午应邀去朋友的创业公司，讨论其公司未来的薪酬结构的设计以及如何提高人才吸引的效率。 见到的是二位创始人，一个担任CTO，另外一位负责公司的运营管理。从他们的言谈举止中，可以感受到他们的激情和力量，他们对自己所做的事业的相信：为普罗大众创造无病痛的人生！ CTO 三十多岁，...
比赛时间： 星期四 8:30 亚洲盘口：0.94 -3.5 0.86 平均赔率：2.30 1.55 赛事分析： 尼克斯上场依靠全队6个上双，球队以107-85击败快船，值得一提的是波神取下全场最高25分，本赛季波神场均得分排名联盟第四，无疑是尼克斯瑰宝，...相关文章推荐
当slider数据列表是动态获取时，如果数据结果只有2条数据时，slider列表会多复制俩个，通过下面的slideChange方法做个判断可以解决这个bug第一步：添加slideChande方法...
实现效果我是代码html代码
1、ionic ion-slide-box实现有关的循环播放图片 2、显示页面中填写有关控件
一.幻灯片 : ion-slide-box指令介绍
ion-slide-box可以做什么
1. 可以做启动切换页面
2. 可以做首页幻灯
3. 可以做页面左右滑动切换
ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
最近在学习ionic ，写项目时候遇到个问题，ion-slide-box中，想控制每个ion-slide片中显示3个div块。
查询了各种大神的帖子，现在想到个解决办法，记录下来，方便以后使用：
但是我们项目中遇到一个问题：一个页面很大，有多个画廊控件，我们的页面很难上下滑动，滑动非常吃力，这是为什么呢？举个例子：如果你的页面放的全都是input输入控件，那么这个页面一样很难滑动，因为当我们在...
基于微信公众号开发ionic+angularjs页面，跳转时页面的url都会被记录下来。点击微信的返回按钮（或手机的返回健）即浏览器的返回，页面会按照记录的历史依次返回。
选项卡的功能经常在...
JavaScript html js页面刷新之后下拉菜单选中值不变,在按钮提交后保存下拉列表中值不变
博客分类：
javaScript
HTMLJavaScript金山
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)相关文章推荐
1、ionic ion-slide-box实现有关的循环播放图片 2、显示页面中填写有关控件
最近在学习ionic ，写项目时候遇到个问题，ion-slide-box中，想控制每个ion-slide片中显示3个div块。
查询了各种大神的帖子，现在想到个解决办法，记录下来，方便以后使用：
解决链接：ionic论坛
在使用ionic slidebox指令做图片轮播显示的时候，发现一个问题，ng-repeat遍历生成一个个slide块的时候，执行完成页面是空白的。更加令人费解的是，页面...
ionic 建立app时引导页的制作
通常的引导页是由一些简单、包含app主要特点的几幅页面滑动显示，在ionic中 引导页通常使用javascript元素
Slide box.
实现效果我是代码html代码
一.幻灯片 : ion-slide-box指令介绍
ion-slide-box可以做什么
1. 可以做启动切换页面
2. 可以做首页幻灯
3. 可以做页面左右滑动切换
ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs
这个问题查了很久，终于明白如何在上拉时为什么会自动调用多次
在第一次自动调用时，如果加载的数据没有充满屏幕，会自动再调用一次，要是还没充满屏幕，会无限次请求数据，官方里面也没说明这个东西，被坑了好长时...
网上有很多关于隐藏ion-tabs的博文，大致的方法都是通过添加angularjs指令。
但是都没有提到解决隐藏时的延迟问题。
下面先介绍下如何隐藏
在标签ion-tabs中添加...
但是我们项目中遇到一个问题：一个页面很大，有多个画廊控件，我们的页面很难上下滑动，滑动非常吃力，这是为什么呢？举个例子：如果你的页面放的全都是input输入控件，那么这个页面一样很难滑动，因为当我们在...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)