mui 下拉加载上拉刷新

分类：MUI

下拉刷新 mui

我的导航时渐变导航，效果已经实现，但是只要我把mui的下拉加载上拉刷新的功能集成上去，刷新滚动的时候，导航就不能渐变了，有人遇到这种问题吗？

代码：大神帮忙调试，谢谢；

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <script src="../js/mui.min.js"></script>  

    <style type="text/css">  
        html,body{  
            background: transparent !important;  
        }  
        .mui-content{  
            background: #e9e9e9;  
        }  
        body {  
            font-family: "宋体";  
            color: #333 !important;  
        }  

        .bottom_border {  
            border-bottom: 0.013rem solid #e9e9e9;  
        }   

        .mui-bar-transparent {  
            background: rgba(255, 0, 0, 0);  
        }  

        .mui-bar-transparent a,.mui-bar-transparent h1 {  
            color: #fff;  
        }  
        .box {  
            background: #fff;  
            overflow: hidden;  
        }  

        .box-a {  
            width: 20%;  
            text-align: center;  
            padding: 0.35rem 0 0.3rem;  
            float: left;  
        }  

        .box-a img {  
            width: 1.17rem;  
        }  

        .box-a p {  
            padding-top: 0.15rem;  
            font-size: 0.32rem;  
            color: #333;  
        }  

        .mui-slider .mui-slider-group .mui-slider-item img {  
            height: 5.17rem;  
        }  

        .mui-slider-indicator .mui-indicator {  
            width: 12px;  
            height: 4px;  
            box-shadow: none;  
            border-radius: 0;  
        }  

        .mui-slider-indicator .mui-active.mui-indicator {  
            background: red;  
        }  

        .title_like {  
            text-align: center;  
            height: 1.17rem;  
            line-height: 1.17rem;  
            background: #fff;  
        }  

        .title_like p {  
            font-size: 0.37rem;  
            color: red;  
        }  

        .title_like p span {  
            font-size: 0.4rem;  
            margin-right: 5px;  
        }  

        .mui-input-clear {  
            background: rgba(255, 255, 255, 0.9) !important;  
        }  

        .input_search {  
            display: inline-block;  
            text-align: center;  
            width: 7.6rem;  
            margin-left: 0.3rem;  
        }  
    </style>  
</head>  

<body>  
    <!--mheader  按下回车键-->  
    <header class="mui-bar mui-bar-transparent" id="header">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <a class="mui-icon mui-icon-chat mui-pull-right"></a>  
        <div class="mui-input-row mui-search input_search" style="width: 300px;">  
            <input type="search" class="mui-input-clear invalid" placeholder="请输入您要搜索的商品名称">  
        </div>  
    </header>  
    <!--下拉刷新容器-->  
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">  
      <div class="mui-scroll">  
        <div class="mui-slider">  
                <div class="mui-slider-group mui-slider-loop">  
                    <!--支持循环，需要重复图片节点   0  1 2 3 0 1 2 3-->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#"><img src="../images/4.jpg" class="img-300"></a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#"><img src="../images/1.jpg" class="img-300"></a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#"><img src="../images/2.jpg" class="img-300"></a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#"><img src="../images/3.jpg" class="img-300"></a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#"><img src="../images/4.jpg" class="img-300"></a>  
                    </div>  
                    <!--支持循环，需要重复图片节点-->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#"><img src="../images/1.jpg" class="img-300"></a>  
                    </div>  
                </div>  
                <!--//轮播图中间底部圆点-->  
                <div class="mui-slider-indicator">  
                    <div class="mui-indicator mui-active"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                </div>  
            </div>  
            <!--五大分类-->  
            <div class="box bottom_border" style="height: 1000px;background: #fafafa;">  
            </div>  
        </div>  
      </div>  
    </div>  

    <script src="../js/jquery-1.7.1.min.js"></script>  
    <script src="../js/common.js"></script>  
    <!--引入框架-->  
    <script type="text/javascript">  
        mui.init({  
            swipeBack:false,  
            pullRefresh : {  
                container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等  
                down : {  
                  height:50,//可选,默认50.触发下拉刷新拖动距离,  
                  auto: true,//可选,默认false.首次加载自动下拉刷新一次  
                  contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容  
                  contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容  
                  contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容  
                  callback :pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                }  
              }  
        });  
        function pullfresh(){  
             mui('#refreshContainer').pullRefresh().endPulldownToRefresh();  //这行代码会隐  
        }  
        /*沉浸式导航的业务逻辑*/  
        mui.plusReady(function() {  
            // 创建加载内容窗口  
            var topoffset = '45px';  
            var header = document.getElementById("header");  
            if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式  
                // 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置  
                topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45);  
                header.style.height = topoffset + 'px';  
                header.style.paddingTop = (topoffset - 45) + 'px';  
            }  
        });  
    </script>  
</body>