Ionic 2 在 ion-content 指令中实现 Scrollable Div

2024-01-11

这是一个答案而不是问题,但我不知道如何在这里发布答案。

看到后一些文章 http://ionicframework.com/docs/api/directive/ionContent/出于同样的原因,我开始知道——
ionContent 指令提供了一个易于使用的内容区域,可以配置为使用 Ionic 的自定义滚动视图。

就我而言, 想要滚动内部的特定分区<ion-contain>例如-

<ion-content>
       <div>
            <div>
              <p> Scroll should not be apply </p>
           </div>
       </div>

    <div *ngFor="let item in items">
             <div>
              <p> Scroll **should be apply** </p>  
                {{item}}
           </div>
    </div>
</ion-content>
  1. 我开始了解虚拟卷轴 https://ionicframework.com/docs/v2/api/components/virtual-scroll/VirtualScroll/,但它正在滚动完整页面,这与我的要求不符。
  2. 也过来看看滚动属性 https://ionicframework.com/docs/v2/api/components/scroll/Scroll/ionic 的,不符合我的要求。

然后我看到离子论坛下列出的一篇很棒的文章,对我帮助很大,如下:https://forum.ionicframework.com/t/ionic-2-scrollable-div-within-ion-content/58788 https://forum.ionicframework.com/t/ionic-2-scrollable-div-within-ion-content/58788

<ion-content style="overflow-y: hidden;">
    <div>
        <h1>This stuff should not scroll.</h1>
    </div>

    <ion-scroll scrollY="true" style="width: 100%; height: 100%;">
    <div *ngFor="let boy in boys">
            <h3>This stuff should scroll.</h3>
    </div>
    </ion-scroll>
</ion-content>

这是上面所需的代码。 https://forum.ionicframework.com/t/ionic-2-scrollable-div-within-ion-content/58788/2这对我有很大帮助。 非常感谢本文的作者(asrinivasan)。

注意:-我注意到-
如果我们的代码中有 ion-item 标签,它可能会给我们带来一些问题。因此,请务必删除此标签。


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ionic 2 在 ion-content 指令中实现 Scrollable Div 的相关文章

  • 表格固定标题和第一列 css/html

    我有一个包含大量行和列的表 但我想固定标题和第一列 这是我需要的图片 只有粉色部分必须水平和垂直滚动 但其他部分在滚动过程中必须保持可见 我的表位于 div 中 首先 我应该使用一张桌子还是四张桌子 蓝色桌子 红色桌子 绿色桌子和粉色桌子
  • AngularCLI 和 Angular Material(原理图)错误:无法解析集合“@angular/material”

    我正在尝试使用显示的 Angular 架构这一页 https material angular io guide schematics当我尝试在项目根目录的终端中使用以下命令时ng 生成 angular material material
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con
  • 单击行内的按钮时防止触发表行 onclick 事件

    我有一个带有 ONCLICK 事件的表行 切换下面的附加数据 在其中一个行单元格内有一个按钮 单击时执行 AJAX 操作 当我单击按钮时 行的 onclick 事件也会触发 并且会发生附加数据在 AJAX 调用完成之前出现 这对我来说是一个
  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域
  • html 表:thead 与 th

    它看起来像 根据示例这一页 http www w3 org TR html4 struct tables html无论如何 如果您使用THEAD 则不需要使用TH 真的吗 如果是这样 THEAD 与 TH 相比有何优点 缺点 The the
  • 通过按 Enter 键提交表单而不使用提交按钮

    好吧 我试图通过按 Enter 键来提交表单 但不显示提交按钮 如果可能的话 我不想涉足 JavaScript 因为我希望一切都能在所有浏览器上运行 我知道的唯一 JS 方式是使用事件 现在的表格看起来像这样
  • 在html页面中使用jquery显示json数据

  • 使用 flex 将项目与底部对齐

    我正在尝试使用 flex 将父级内部的项目与父级底部对齐 但由于某种原因它不起作用 我究竟做错了什么 login border 1px solid red height 50px display flex login border radi
  • 没有将“exportAs”设置为“ngbDatepicker”的指令

    I m using angular 4 i was trying to add datepicker while i m using datepicker popup html I m getting error as given belo
  • 如何在 Android 上的 PhoneGap 中设置音频播放速率?

    有谁能够让音频播放速率在 Android 上工作吗 媒体播放器似乎覆盖 忽略音频标签的播放速率属性 None
  • 将 Regex 对象分配给 html 输入模式

    我需要以编程方式将正则表达式对象分配给输入元素模式属性 以下是我当前的实现 var regex d 5 element attr pattern regex toString slice 1 1 有没有更好的方法来做到这一点而不需要字符串操
  • Angular6 材料垫选择列表中当前选择的值

    使用角度材质2垫选择列表 能够判断当前选项是选中还是未选中 Boolean 组件 html
  • 在 Dartlang 中下载大文件

    我需要使用 dartlang 从浏览器下载较大的文件 我一直在使用 data uri 来下载 但已经达到了该方法的大小限制 想知道最好的方法是什么 我研究了使用 HTML5 文件系统 API 但它已被弃用 显然在大多数浏览器中从未真正实现过
  • Bootstrap 4 Beta 0 网格系统上的 Rowspan

    您好 我正在开发一个使用 Bootstrap 4 Beta 的电子商务模板 我让它在移动设备上工作 但在桌面设备上我不知道如何让购买按钮保持在标题下 在我的方法中 它出现在 图库 部分下 Desired Desktop Desired Mo
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 使用 rxjs 将数据添加到 http 响应

    我有一个包含司机 ID 的旅行实体 我可以使用 RESTFull 端点获取获取行程 例如 trips 2 example response id 2 driver id 123 我可以使用端点获取驱动程序详细信息 例如 drivers 12

随机推荐