ionic开发中动态设置ion-scroll的高度（赞）

爱被打了一巴掌 2022-05-15 10:42 256阅读 0赞

原文出处：[https://blog.csdn.net/jinrui\_w/article/details/51491716][https_blog.csdn.net_jinrui_w_article_details_51491716]

在开发app中，有时候会遇到这样的需求，在页面的下半部分是一个列表，此时我们就需要用到滚动视图，但是我们要适配不同的屏幕，这会导致滚动视图的高度是变化的，所以要动态获取屏幕的高度。

步骤：

1.在app.js中添加如下代码：

.directive('scrollHeight',function($window){
      return{
        restrict:'AE',
        link:function(scope,element,attr){
          element[0].style.height=($window.innerHeight-44-49-200)+'px';
        }
      }
    })

说明：44为导航栏高度，49为标签栏高度，200为黄色视图高度，如下图：

![20160524171505573][]

2.设置ion-scroll高度

在ion-scroll后添加scroll-height

代码：

<ion-scroll direction="y" scroll-height>
        <div class="item item-divider">设备列表</div>
        <ion-list>
            <ion-item ng-repeat="item in items" class="item-icon-right">
                {
      {
      item}}
                <i class="icon ion-ios-arrow-forward"></i>
            </ion-item>
        </ion-list>
    </ion-scroll>

此时，滚动视图的高度能自适应屏幕的高度。

[https_blog.csdn.net_jinrui_w_article_details_51491716]: https://blog.csdn.net/jinrui_w/article/details/51491716
[20160524171505573]: /images/20220515/ac4b7754175444039e7c246e7e009bf0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 ionic4+angular8+动态设置首页

我采用最原始最简单的方案，直接指定刷新后访问的实际URL，不动态操作angular路由。访问URL示例： [http://localhost:8100/\/tabs/ma

快来打我*/ 2023年07月10日 14:26/ 0 赞/ 13 阅读

相关 iview/element的table高度动态设置

前言：在使用vue的框架的时候，其中列表是大家经常使用的功能，但是放到我们项目中的话，也有很多属性需要我们二次进行改动。 iview: 1、页面上：官方的

小咪咪/ 2022年09月10日 00:12/ 0 赞/ 204 阅读

相关动态设置Cell的高度

\- (UITableViewCell \)tableView:(UITableView \)tableView cellForRowAtIndexPath:(NSIndexP

约定不等于承诺〃/ 2022年08月09日 18:42/ 0 赞/ 170 阅读

相关动态设置label的高度

UILabel \contentLabel=\[\[UILabel alloc\] initWithFrame:\_frame\]; CGRect frame=content

曾经终败给现在/ 2022年08月09日 14:38/ 0 赞/ 189 阅读

相关 JavaScript动态设置table的高度

这两天在调测系统的兼容性时遇到一个设置table高度的问题，页面功能很简单，就是页面中央一个文件，文件下方有一个保存按钮，文件内可以点击“添加项目按钮”来在该文件内增加表格数（

秒速五厘米/ 2022年07月29日 11:36/ 0 赞/ 775 阅读

相关 iview table高度动态设置

iview table高度动态设置在使用iview table表格组件的时候，由于我的屏幕分辨率比较大，在自己pc机上设置的固定高度很适合，在测试（tes

- 日理万妓/ 2022年06月02日 02:24/ 0 赞/ 265 阅读

相关 vue-cli中动态设置页面可视区域高度

原文章路径：[原文章][Link 1] 这里用到了jquery，需要引入jquery依赖，当然也可以直接进行dom操作 HTML代码： <template>

淩亂°似流年/ 2022年05月20日 08:28/ 0 赞/ 246 阅读

相关 Ionic3+ECharts图表 (赞)

原文出处:[https://blog.csdn.net/a1\_a1\_a/article/details/80104770][https_blog.csdn.net_a1_a

忘是亡心i/ 2022年05月18日 04:35/ 0 赞/ 271 阅读

相关 ionic开发中动态设置ion-scroll的高度（赞）

原文出处：[https://blog.csdn.net/jinrui\_w/article/details/51491716][https_blog.csdn.net_jinr

爱被打了一巴掌/ 2022年05月15日 10:42/ 0 赞/ 257 阅读

相关 ionic与 cordova理解（赞）

原文出处：[https://blog.csdn.net/liudongdong19/article/details/79964624][https_blog.csdn.net_

r囧r小猫/ 2022年01月11日 08:29/ 0 赞/ 278 阅读