ionic AngularJS-设定ion-scroll div 动态高度

最新推荐文章于 2019-10-14 14:02:33 发布
原创 最新推荐文章于 2019-10-14 14:02:33 发布 · 5.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用ion_scroll组件并动态调整其高度以适应不同窗口大小。通过在JavaScript中计算页面的实际高度减去头部和底部固定元素的高度来实现。

在ion_scroll中，必须设定固定的高度后才能实现Y方向的滚动，但是对于不同高度的窗口，需要根据实际情况进行设定其高度

设定该ion_scroll的ng_style属性，

ng-style="grid_height"
js中设定动态的高度，页面的高度-header-foot及其他固定的高度
$scope.grid_height={height:''+document.getElementById("html").offsetHeight-340+'px'};

Ionic ion-nav-view使用整理
天马3798
02-17 4833
一、ion-nav-title标题栏文字居中和绑定 1.ion-nav-bar设置居中 2.绑定title内容
ionic版本从v1.0.0升级到v1.2.4后,android上使用<ion-content>的页面无法滑动
aty
04-27 2761
ionic版本从v1.0.0升级到v1.2.4后,android上使用<ion-content>的页面无法滑动
ionic开发中动态设置ion-scroll的高度
JR的博客
05-24 1万+
在开发app中，有时候会遇到这样的需求，在页面的下半部分是一个列表，此时我们就需要用到滚动视图，但是我们要适配不同的屏幕，这会导致滚动视图的高度是变化的，所以要动态获取屏幕的高度。 步骤： 1.在app.js中添加如下代码： .directive('scrollHeight',function($window){ return{ restrict:'AE', link
angularjs 页面自适应高度
品味生活
08-26 1万+
需求在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。实现方案 在ui-view所在的Div添加directive，directive中通过element.css初始化计算div的高度，动态更新div高度 directive监听（$$watch)angular的$digest，实时获取body高度，动态赋值model或ele
ion-scroll 无法滑动到页面底部
qq_42806214的博客
10-14 376
iconic 的标签无法自动计算高度，导致无法滑动到底部 最近工作中有一个功能需要用到iconic，页面的左右两边各有一个标签
angularjs 滚动条 angular-scroll插件
沐沐
06-09 6406
超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 超级无敌好用强推！！！！ 使用缘由： 在进行网页开发时，导航栏想做成能够随着页面滚动条距浏览器上下距离来调整状态的样式，所以进行了探索。 但是网上获取滚动条scroll以及对其进行操作的方法，多数为jQuery以及javascript，但是项目使用的是angularjs，如果和jQuery混写可能会出现问题，所以自...
ionic开发——获取ion-scroll滚动条的滚动值
Mickeymouse
03-23 8135
在ionic 开发中，当我用到ion-scroll这个可以滚动的容器的时候，如果我们想要获取到滚动条已经滚动的距离，在android和ios设备上是不一样的，可以通过下面的方法来获取 在android上，我可以直接给ion-scroll一个id="myscroll", 垂直滚动值：document.getElementById("myscroll").scrollTop； 水平滚动值：
ionic4滑动加载（ion-infinite-scroll）
为什么我的眼里常含泪水？
01-10 5520
效果图如下： 并不是此代码的结果，下面代码只是我源码的部分，但应该够用了。 &lt;ion-list lines="none" inset="true" class="listfen" *ngFor="let record of pressRecordList; index as i;"&gt; &lt;ion-item&gt; &lt;s
ionic1 使用ion-scroll加载更多数据
最新发布
06-13
在 Ionic 1 (AngularJS 版本) 中，使用 `ion-scroll` 实现加载更多数据的功能（如无限加载或分页加载）主要依赖于 `on-scroll` 事件来检测滚动位置。`ion-scroll` 是一个基础滚动容器组件，不同于 `ion-infinite-...
Ionic + Angular.js实现图片轮播的方法示例
10-19
<ion-content class="padding" scroll="false"> <ion-slides class="slider-box" options="options" slider="data.slider"> <ion-slide-page> <div class="box blue"><h1>BLUE</h1></div> </ion-slide-page> ...
用JS scrollHeight方法实现textarea输入高度自适应的方法
lucyyang2008的博客
09-16 4903
HTML源代码部分：                         {$answer['content']} //textarea高度自适应 function autosize(obj) {     var d_h = parseInt(obj.attributes['default_height'].value);     if(obj.scrollHeight
使用ionic框架的<ion-scroll>进行水平滚动时，导致页面难以上下滑动的解决方案
热门推荐
aty
03-17 2万+
但是我们项目中遇到一个问题：一个页面很大，有多个画廊控件，我们的页面很难上下滑动，滑动非常吃力，这是为什么呢？举个例子：如果你的页面放的全都是input输入控件，那么这个页面一样很难滑动，因为当我们在手机屏幕上滑动的时候，一不小心很容易就会点中这些输入框，当输入框获得焦点，页面就不能滑动了。使用<ion-scroll>一样有这个问题，当页面全是画廊控件的时候，滑动也十分费劲。从ionic文档中也没有找到好的解决办法，最后解决方法是：不使用<ion-scroll>指令，自己实现左右滑动。利用HTML5中的to
ion-scroll滚动到底部事件
爱吃锅包肉
04-28 2851
部分代码块           device-width on-scroll="onScroll()">                                                                                                                      image-preview="{
angular实现div盒子高度自适应
wang110o的博客
03-16 2724
&lt;body &gt; &lt;div my-dre&gt;&lt;/div&gt; &lt;/body&gt; &lt;script&gt; angular.module("myApp",[]) //自定义一个指令 .directive("myDre",function(){ return{ link:function($scope,Ele,Attrs){
div实现自适应高度的textarea，实现angular双向绑定
weixin_30810583的博客
08-16 174
相信不少同学模拟过腾讯的QQ做一个聊天应用，至少我是其中一个。 过程中我遇到的一个问题就是QQ输入框，自适应高度，最高高度为3row。 如果你也像我一样打算使用textarea，那么很抱歉，你一开始就错了。 textarea不是不可以的，然后我是这样错的。（就是监听scroll 如果出现了，就增加1rows 的高度）然而这样真的很挫 textarea.bind('change','k...
ionic2屏幕适配，动态调整大小
Robert Zhang
03-20 1万+
我现在的项目是使用ionic2给平板开发一个软件。第一个就是遇到屏幕适配的问题。官方的示例代码，放在平板上，也是会出现界面元素放不下的问题。当然，在小屏幕上，软件出现了滚动条，但是从视觉和操作上根本不满足我们软件的需要。因此我们需要软件更具屏幕的大小动态的适配。   而在这方面在网上很少能找到答案，对于我这个 小白，可是不知所措。当然项目必须要做，因此就得探索学习。 一．初探 Ionic2
ionic angularjs 实现Enter键的提交
kkliu201210的专栏
06-22 4074
input type="text" placeholder="扫描需求单据二维码" ng-model="scaninfo.transfer_in_no" ng-enter="getTransfer(scaninfo.transfer_in_no);"> directives.js angular.module('starter.directives',[]) .directi
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值