利用mui 自定义吸顶（完美兼容ios跟安卓）-下拉刷新

分类：MUI

body{
padding: 0rem !important;
margin: 0rem !important;
background: white;
line-height: 0.42rem !important;
font-family: "黑体";
touch-action: none;
}

/头部自定义样式/

top{

display:flex;  
height:0.88rem;  
line-height:0.88rem;  
background: white;  
padding: 0px !important;  
margin: 0px !important;

}

top>div:nth-of-type(1){

width:15%;

}

top>div:nth-of-type(1) img{

width: 0.52rem;  
height: 0.52rem;  
margin-left: 0.32rem;  
position: absolute;  
bottom: 0.18rem;

}

top>div:nth-of-type(2){

width:70%;  
text-align: center;  
font-size: 0.36rem;  
white-space: nowrap;  
text-overflow: ellipsis;  
overflow: hidden;  
color: #333333 !important;  
font-weight: bold;  
box-sizing: border-box;

}

top>div:nth-of-type(3){

width:15%;  
padding-right: 0.24rem;

}

top>div:nth-of-type(3) img{

float:right;

}
/头部样式结束/

/中间内容/
/.mui-bar-nav~.mui-content {
padding-top: 0.88rem;
} /

mui-scroll-wrapper{

top: 0.88rem;  
background: white !important;

}

.boxByImage{
height: 7.18rem;
text-align: center;
background: white;
}
.boxByImage img{
width:100%;
height: 100%;
}

/吸顶tabbar选项卡/
.tabList{
width: 100%;
height:1rem;
display: flex;
border-bottom:1px solid #F0F0F0;
background: white;
}

tabList{

opacity: 0;     
height: 0rem;   
background: white;

}
.tabList>div{
flex: 1;
height:1rem;
text-align: center;
line-height: 1rem;
font-size: 0.32rem;
font-weight:400;
color:rgba(51,51,51,1);
position: relative;
}
.tabList span{
width:0.32rem;
height:0.04rem;
background:#2CE27A;
position: absolute;
bottom: 0.16rem;
left:50%;
margin-left: -0.16rem;
animation: bbh 0.6s;
}

/间距条/
.jx{
height: 0.2rem;
background: #F7F7F7;
}

/下拉刷新的盒子---自定义的里面可以自己随便加什么都可以/
.upLoad{
width: 100%;
text-align: center;
font-size: 0.36rem;
height:1.28rem;
line-height:1.28rem;
margin-top: -1.28rem;
opacity: 0;
color: #CCCCCC;
}
.upLoad img{
width: 100%;
height: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>根据mui-scroll-wrapper的滑动特性,完美兼容安卓ios吸顶效果,还可自定义下拉刷新</title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/index.css" />

<script>document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';</script>
</head>
<body>
<div id="top" class="mui-bar mui-bar-nav">
<div><img src="black.png" alt="" /></div>
<div><span>吸顶(兼容安卓跟ios)+下拉刷新</span></div>
<div></div>
</div>

<div class="mui-content">  
    <!--这里的布局不能放在mui-scroll-wrapper，不然固定定位失效-->  
    <div class="tabList" id="tabList">  
        <div>布局1</div>  
        <div>布局2</div>  
        <div>布局3</div>  
    </div>  

    <div class="mui-scroll-wrapper" id="mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <!--下拉刷新布局-->  
            <div class="upLoad"><img src="down.gif" alt="" /></div>  

            <!--图片-->  
            <div class="boxByImage"><img src="home_top.png" alt="" /></div>  

            <!--间距-->  
            <div class="jx"></div>  

            <!--这个布局跟上面要一样，多增加了一个tabListInScroll属性-->  
            <div class="tabList tabListInScroll">  
                <div>布局1</div>  
                <div>布局2</div>  
                <div>布局3</div>  
            </div>  

            <!--增加一些数据模拟效果-->  
            <div>item1</div>  
            <div>item2</div>  
            <div>item3</div>  
            <div>item4</div>  
            <div>item5</div>  
            <div>item6</div>  
            <div>item7</div>  
            <div>item8</div>  
            <div>item9</div>  
            <div>item10</div>  
            <div>item11</div>  
            <div>item12</div>  
            <div>item13</div>  
            <div>item14</div>  
            <div>item15</div>  
            <div>item16</div>  
            <div>item17</div>  
            <div>item18</div>  
            <div>item19</div>  
            <div>item20</div>  
            <div>item21</div>  
            <div>item22</div>  
            <div>item23</div>  
            <div>item24</div>  
            <div>item25</div>  
            <div>item26</div>  
            <div>item27</div>  
            <div>item28</div>  
            <div>item29</div>  
            <div>item30</div>  
            <div>item31</div>  
            <div>item32</div>  
            <div>item33</div>  
            <div>item34</div>  
            <div>item35</div>  
            <div>item36</div>  
            <div>item37</div>  
            <div>item38</div>  
            <div>item39</div>  
            <div>item40</div>  
            <div>item41</div>  
            <div>item42</div>  
            <div>item43</div>  
            <div>item44</div>  
            <div>item45</div>  
            <div>item46</div>  
            <div>item47</div>  
            <div>item48</div>  
            <div>item49</div>  
            <div>item50</div>  
        </div>  
    </div>  
</div>

</body>
<script src="js/jquery_3.0.js"></script>
<script src="js/mui.min.js"></script>
<script>
mui.init();
var boxImght = $(".boxByImage").height(); //中间图片的高度
var topHeight = $("#top").height(); //头部高度
var tabList = $(".tabList").height(); //选项卡高度
var jx = $(".jx").height(); //间隙高度
var scroll = mui('#mui-scroll-wrapper').scroll(); //scroll滑动的距离方法

    var obj  = {                                                //下拉刷新  
        upFlag : true,                                          //滑动开关，不然下拉刷新会一直闪烁因为滑动是时时的  
        time   : 800                                            //展示的时间  
    }  

    //头部动画效果   boxImght+jx就是向上滑的距离，然后就自动吸顶，这里通过控制opacity属性，让吸顶更自然，而不用通过定位方式去做（麻烦）；  
    document.querySelector('#mui-scroll-wrapper').addEventListener('scroll', function (e ){   
        //吸顶效果  
        if(scroll.y<=-(boxImght+jx)){                                  
            $("#mui-scroll-wrapper").css("top","1.88rem");        //这里的1.88rem是css里面头部高度加上tabList选项卡的高度相加而来的；  
            $("#tabList").css({height : "1rem",opacity : "1"});  
            $(".tabListInScroll").hide();  
        }else{  
            $("#mui-scroll-wrapper").css("top","0.88rem");        //默认css就是0.88rem;  
            $("#tabList").css({height : "0rem",opacity : "0"});  
            $(".tabListInScroll").show();  
        }  
    })  

    //下拉刷新  
    document.addEventListener('touchmove',function(e){  
        if(obj.upFlag){  
            if(scroll.y>80){                                 //触发下拉的最小距离80可以自定义  
                obj.upFlag = false;  
                $(".upLoad").animate({                            //展示下拉刷新内容  
                    opacity : 1,  
                    "margin-top":"0rem"  
                });  
            };  
        };  
    });  
    document.addEventListener('touchend',function(e){  
        setTimeout(function(){  
            $(".upLoad").animate({                                //隐藏下拉刷新内容,500ms是动画 效果  
                opacity : 0,  
                "margin-top":"-1.28rem"                         //默认css展示的外边距去隐藏  
            });  
            mui.toast("我刷新了");  
            obj.upFlag = true;  
        },obj.time);  
    });

</script>
</html>

用最简单的代码，实现最完美的功能，里面的mui.min.js，还要jquery自己cdn引入下就好了，没有其它js了；

0 赞关注分享

0 个评论

要回复文章请先登录或注册