玛丽De隔壁
玛丽De隔壁
  • 发布:2015-12-25 17:34
  • 更新:2017-04-22 17:37
  • 阅读:7558

怎样控制tab-with-viewpagerindicator示例中mui-control-content的高度自适应

分类:MUI

在mui的选项卡中,怎样控制tab-with-viewpagerindicator示例mui-control-content的高度自适应,不是给他指定一个高度,而是随着内容的增加而增高?

2015-12-25 17:34 分享
已邀请:
X灬X

X灬X

mui.plusReady(function(){  
    mui('.mui-scroll-wrapper').scroll({  
        indicators: true //是否显示滚动条  
    });  
    var resolutionHeight = window.innerHeight;  
    resolutionHeight = resolutionHeight-100;  
    document.getElementById("item1mobile").setAttribute("style","min-height:"+resolutionHeight+"px;");  
    document.getElementById("item2mobile").setAttribute("style","min-height:"+resolutionHeight+"px;");  
})

获取屏幕宽度把上面的减了用js设置

X灬X

X灬X

获取屏幕高度。。。。不是宽度

sgttyyd@qq.com

sgttyyd@qq.com

我把<div id="scroll" class="mui-scroll-wrapper"></div>这个层删除,就可以用了。

其实内容部分,保留下面的图层,就能用了,其他的没用上。
<div id="item1" class="mui-control-content mui-active">内容1</div>
<div id="item2" class="mui-control-content">内容2</div>
<div id="item3" class="mui-control-content">内容3</div>

赵梦欢

赵梦欢 - 专注前端,乐于分享!

这个问题在于没有理解区域滚动的原理,mui中scroll控件中区域滚动通过绝对定位实现,所以高度需要手动控制,如本例子中可以设置:

.mui-control-content{  
    position: absolute;  
    top: 100px;  
    bottom: 0px;  
    left: 0px;  
    right: 0px;  
}

另外mui中封装了一个类常用于这种方式:

.mui-fullscreen {  
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
}

所以添加mui-fullscreen类,然后修改一下top值就可以了。

  • fxj

    修改了top后上拉加载更多就会有问题,你有遇到过吗?

    2016-12-12 15:28

  • 2014632992@qq.com

    .mui-slider .mui-slider-group .mui-slider-item {

    font-size: 14px;

    position: relative;

    display: inline-block;

    width: 100%;

    height: 100%;

    vertical-align: top;

    white-space: normal;

    }

    .mui-control-content:nth-child(3) {

    background-color: palegreen;

    / min-height: 568px; /

    }

    .mui-control-content.mui-active {

    display: block;

    }

    .mui-fullscreen {

    / position: absolute;/

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    }

    .mui-control-content {

    background-color: white;

    min-height: 215px;

    }

    这个min-height:215px;一直在这怎么去掉

    2017-04-18 17:02

大周

大周

有人解决了这个问题吗?我试 了好久不知道怎么改,官方也不给个答复啊?
文档也不全,只能从示例页面里一个个找,还不完善

WHY1WH

WHY1WH

这个问题我是设置了一个很高的高度,因为还有下拉刷新,所以在应用上不会有影响

3349547246@qq.com

3349547246@qq.com

<div id="scroll" class="mui-scroll-wrapper"></div>把这个层去掉了就不能左右拖动这滑动了,只能点击。
还有什么方法可以解决吗

要回复问题请先登录注册