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. JS:公历、农历互转

    先申明这段代码不是我写的,纯粹只是觉的比较好用,所以记录下来以后继续使用,也同样分享给大家,大家有更好的可以推荐给我,谢谢! function CalConv(M, dateStr) { if (da ...

  2. NLog使用总结

    一.代码调用方式:    public static readonly Logger Logger = LogManager.GetCurrentClassLogger(); Logger .Trac ...

  3. ngTbale假分页实现排序、搜索、导出CSV等功能

    一. ngTable功能简化 使用ngTable经常有分页,排序,过滤等功能,实现诸多功能较为麻烦.为了方便开发过程,可以抽取一些table共同点写一个公有方法. 注意: 1. 由于很多特别的需求,可 ...

  4. Eclipse设置选中高亮显示（包含debug）

    如果不高亮显示了:工具栏里有个黄色小笔的图标,点一下就可以了,或者alt+shift+O 设置高亮显示:

  5. Mailbox and Mail

    #ifndef __MAILBOX_H__ #define __MAILBOX_H__ #include <stdint.h> #include <stdlib.h> #inc ...

  6. 如何自学Java

    转自:http://www.360doc.com/content/12/0624/19/5856897_220191533.shtml   JAVA自学之路 JAVA自学之路 一:学会选择 为了就业, ...

  7. Xen安全架构sHype/ACM策略配置图文教程

    实验要求 1.     熟悉Xen虚拟化平台部署: 2.     Xen sHype/ACM安全架构中的Simple TE和Chinese Wall策略及事实上现机制的分析与验证. 第1章       ...

  8. C++学习笔记之由文本文件读取数据到vector模板建立的二维数组 并存储为新的文本文件

    阅读本文可首先参考: C++学习笔记之输入.输出和文件 测试数据: /*读取txt文件到二维数组*/ #include <iostream> #include <fstream> ...

  9. acdream 1738 世风日下的哗啦啦族I 分块

    世风日下的哗啦啦族I Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acdream.info/problem?pid=1738 Descri ...

  10. (字符串的处理4.7.16)POJ 1159 Palindrome(让一个字符串变成回文串需要插入多少个字符...先逆序,在减去公共子序列的最大长度即可)

    /* * POJ_1159.cpp * * Created on: 2013年10月29日 * Author: Administrator */ #include <iostream> # ...