ion-content形成上下结构，上面固定，下层可滑动

首先要设置ion-content不可滑动：<ion-content class="has-subheader" scroll="false"></ion-content>

其次在ion-content中，使用ion-scroll，并加上css:<ion-scroll direction="y" style="position: absolute; top:110px; bottom: 0; left: 0; right: 0;"></ion-scroll>

这样就可以实现滑动时ion-content里边的内容形成上下结构，不在ion-scroll标签里边的内容固定不动，ion-scroll里边的内容可以滚动，且不会遮挡上方元素。

ion-scroll水平滑动时在Android中无效

解决办法：在ion－scroll标签里加上overflow-scroll="false"；

ionic中的ion-content与ion-scroll的更多相关文章

  1. ionic中获取坐标方法

    ionic中获取坐标的方法 1.首相需要执行命令: cordova plugin add cordova-plugin-geolocation2.然后块级注入配置bower文件引入ngCordova ...

  2. ionic中的生命周期函数

    //ionic中的生命周期函数 onPageLoaded(){ //page初始化时 console.log("page 1 : page loaded"); } //在这里可以做 ...

  3. Ionic中弹窗

    Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一 ...

  4. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  5. ZH奶酪：Ionic中（弹出式窗口）的$ionicModal使用方法

    Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...

  6. ionic中android的返回键

    ionic中android的返回键 在ionic框架中已经注册了几个返回事件,分别是 view sideMenu modal actionSheet popup loading 他们的优先级分别是 v ...

  7. Ionic 中badge的应用

    app中如果有服务端推送过来的消息,用户没有查看的话,出现一个数字提醒,类似微信的那种效果. 在Ionic中的实现过程还是很简单的: <ion-tab title="首页" ...

  8. 解决 ionic 中的 CORS（跨域）

    译者注:本人翻译功力有限,所以文中难免有翻译不准确的地方,凑合看吧,牛逼的话你看英文版的去,完事儿欢迎回来指正交流(^_^) 如果你通过 ionic serve 或者 ionic run 命令使用或 ...

  9. 电子商务(电销)平台中内容模块(Content)数据库设计明细

    以下是自己在电子商务系统设计中的数据库设计经验总结,而今发表出来一起分享,如有不当,欢迎跟帖讨论~ 文章表 (article)|-- 自动编号|-- 文章标题 (title)|-- 文章类别编号 (c ...

  10. angular 图片加载失败 情况处理？ 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

随机推荐

  1. php中定义类

    <?php class Person{ //定义了一个Person类 public $name; //定义属性name public $age; //定义属性age function __con ...

  2. CentOS常用查看系统命令

    系统 uname -a                 查看内核/操作系统/CPU信息head -n 1 /etc/issue  查看操作系统版本cat /proc/cpuinfo       查看C ...

  3. Linux编译安装RTL8192CU芯片驱动,使用TP_LINK wn823n无线网卡

    前几天给自己的台式电脑安装了Window 7+CentOS 6.4 Linux双系统,发现在Windows 7下面可以正常使用TP_LINK wn823n无线网卡来连接无线网络,但是在Linux下面, ...

  4. Unity3d：The requested item has been unloaded

    问题描述:System.Xml类库下实例化的对象所有枚举类的值都显示如标题错误解决方案1:查看所在类是否:MonoBehaviour,如果没继承,添加即可.<ignore_js_op> 

  5. MFC中OnDraw()和OnPaint()的区别[转]

    问题 问题:我在视图画的图象或者文字,当窗口改变后为什么不见了?OnDraw()和OnPaint()两个都是解决上面的问题,有什么不同? OnDraw()和OnPaint()好象兄弟俩,因为它们的工作 ...

  6. [转帖]ExtJs与服务器的交互(一)

    Ext是一个非常好的Ajax框架,其华丽的外观表现确实令我们折服,然而一个应用始终离开不服务器端,因此在实现开发中我们需要对Ext与服务器端的交互技术有较为详细的了解,在开发中才能游刃有余地应用.本文 ...

  7. uva167 - The Sultan's Successors

      题意:八皇后问题的扩展.8*8棋盘上每个格子都有一个整数,要求8个皇后所在格子的数字之后最大 解法一,回溯: 用vis数组记录 列,主对角(y-x), 副对角(y+x) 访问情况 #include ...

  8. linux tar.gz zip 解压缩 压缩命令

    http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0. ...

  9. C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  10. mysql 加入列，改动列，删除列。

    MySQL 加入列,改动列,删除列 ALTER TABLE:加入,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to bb ...