[已解决] 安卓4.1，下拉刷新位置总在顶部

分类：MUI

下拉刷新

页面结构如下：

< 返回这里是title 右按钮
这里放了一个筛选按钮 --------------1
subpage页面，本页面带一个下拉刷新功能 ---------------2，距离top 50px

我们把列表页面通过subpage的方式加载，并且距离顶部给了top空间。
这个subpage的显示位置确实距离顶部有一定空间（从上图的标注2开始），但是为啥下拉刷新的位置确不是从自身的webview开始呢（安卓上的下拉位置在1处开始）？

代码如下：

### mui.init({  
subpages:[{  
    url:'list.html',  
    id:'projects/list.html',  
    styles:{  
    top:'50px',  
    bottom:'0px'  
    }  
}]  
});  
### >

list页面的布局：
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll"></div>
</div>

2015-04-24 16:06 负责人:无分享

9 个回复

DCloud_UNI_FXY

贴一下父webview的代码。
应该是父webview的代码没有处理好。
建议父webview的结构：

<header class="mui-bar mui-bar-nav">...</header>  
<div class="mui-bar mui-bar-standard mui-bar-header-secondary">  
<!--筛选按钮-->  
</div>  
<div class="mui-content"></div>

Utaoy (作者)

感谢，已解决，筛选的div要加上mui-bar mui-bar-nav的class

2015-04-24 18:29
Funk

回复 Utaoy:这个结构才是解决有筛选的自定义高度的方法

2015-07-30 19:52
Funk

不过最终解决的效果依旧是88px高度如果需要更大的高度就需要三个webview叠加（目前的处理方案）

2015-07-30 19:57

Utaoy (作者)

OK已解决。
主要就是筛选的div要加上mui-bar mui-bar-nav 的class

Demarcia

我看了看源码，其中起作用的CSS代码是这个

.mui-bar-nav ~ .mui-content .mui-pull-top-pocket {  
    top: 45px;（改成父webview的高度即可）  
}

hyhezhen

谢谢楼上的。这问题折腾大半天，终于解决。
父窗口的 <header .... 必不可少
而<div class="mui-content"></div> 不是必须的

d***@163.com

楼主这个问题怎么解决的，我也遇到这个问题了，折腾半天也没搞定，您是怎么处理的呢？
这个我的代码

<body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 id="title" class="mui-title">首页</h1>  
        </header>  
        <div class="title_img mui-bar-nav"></div><!-- 这个是显示图片，目前下拉提示就在这个顶部的位置了，，， -->  
        <nav class="mui-bar mui-bar-tab">  
            <a id="defaultTab" class="mui-tab-item mui-active" href="tab/tab-jf.html">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" href="tab/tab-jg.html">  
                <span class="mui-icon iconfont icon-101"></span>  
                <span class="mui-tab-label">关于</span>  
            </a>  
            <a class="mui-tab-item" href="tab/tab-jn.html">  
                <span class="mui-icon mui-icon-settings"></span>  
                <span class="mui-tab-label">帮助</span>  
            </a>  
            <a class="mui-tab-item" href="tab/tab-qr.html">  
                <span class="mui-icon mui-icon-contact"></span>  
                <span class="mui-tab-label">确认</span>  
            </a>  
            <a class="mui-tab-item" href="tab/tab-sz.html">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">设置</span>  
            </a>  
        </nav>  

<script type="text/javascript" charset="utf-8">  
             //mui初始化  
            mui.init();  
            var subpages = ['tab/tab-jf.html', 'tab/tab-jg.html', 'tab/tab-jn.html', 'tab/tab-qr.html','tab/tab-sz.html'];  
            var subpage_style = {  
                top: '280px',  
                bottom: '51px',  
                bounce: 'vertical'  
            };