仿百度地圖上拉下滑抽屜盒

weixin_30639719發表於2020-04-05
原型圖

需求:上拉導航條的時候,會載入出具體的資料資訊;
上拉的位置高度由這些資訊的條數決定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
<style>* {
      margin: 0;
      padding: 0;
      list-style: none;
}
html,
body {
      width: 100%;
      height: 100%;
      overflow:hidden
}
a {
      text-decoration: none;
}
body {
      position: relative;
}
.div2 {
      position: absolute;
      width: 100%;
      background: #fff;
}
.downNav {
}
.downNav ul {}
.downNav ul li {
      list-style: none;
      height: 3rem;
      border: 1px solid #CCCCCC;
      line-height: 3rem;
      border-top: none;
}
.downNav ul li span {
      display: inline-block;
      text-align: center;
}
.downNav ul li span:first-child {
      width: 12%;
}
.downNav ul li span:nth-child(2) {
      width: 25%;
}
.downNav ul li span:nth-child(3) {
      width: 48%;
}
.downNav ul li span:nth-child(4) {
      width: 2%;
}
.down {
      
      position: relative;
      border: 1px solid #F0F1F1;
      border-right: none;
      width: 100%;
}
.site {
      margin: 0 0 0 1rem;
      font-size: 24px;
      line-height: 71px;
}
.details {
      margin: 0 0 0 1rem;
      margin-bottom: 23px;
}
.details span {
      margin: 0 10px 0 0;
}
.walk {
      width: 80px;
      height: 80px;
      border-radius: 50px;
      background: #3487ef;
      text-align: center;
      line-height: 14px;
      position: absolute;
      right: 18px;
      bottom: 78px;
}
.walk img {
      margin-top: 11px;
}
.walk p {
      color: #FFFFFF;
}</style>
</head>
<body>
        <div id="div2" class="div2">
            <div class="wrap">
                  <div class="down">
                              <div class="site">光大會展中心F座2201</div>
                              <div class="details"><span>198m</span>|<span style="margin-left:10px;">漕寶路86號光大會展中心f座2201</span></div>
                              <div class="walk">
                                    <img src="img/walk.png" alt="行走" />
                                    <p>到這去</p>
                              </div>
                        </div>
                  <div class="downNav">
                        <ul>
                                    <li>
                                          <span>姓名</span>
                                          <span>聯絡電話</span>
                                          <span>郵箱</span>
                                    </li>
                                    
                                    <li>
                                          <span>王婷</span>
                                          <span>152104</span>
                                          <span>1357097</span>
                                          <span><a  href="form.html"  >></a></span>
                                    </li>
                                    <li>
                                          <span>王婷</span>
                                          <span>152104</span>
                                          <span>1357097</span>
                                          <span><a  href="form.html"  >></a></span>
                                    </li>
                                    
                                    <li>
                                          <span>王婷</span>
                                          <span>152104</span>
                                          <span>1357097</span>
                                          <span><a  href="form.html"  >></a></span>
                                    </li>
                                    <li>
                                          <span>王婷</span>
                                          <span>152104</span>
                                          <span>1357097</span>
                                          <span><a  href="form.html"  >></a></span>
                                    </li>
                              </ul>
                              <div class="dw"></div>
                        </div>
                  </div>
        </div>
</body>
<script type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js";></script> 
<script>
      $(function() {          
      var isdrag = false;
      var NowTop = 0,
            flag   = true,
            h = $(".wrap").height(),
            h1 = 0,
            h2 = $(".div2").position().top,
            moveY = 0,
            toTop = 0,
            disEndY=0,
            disY;
      var oDiv2 = document.getElementById("div2");
      oDiv2.addEventListener('touchstart', thismousedown);
      oDiv2.addEventListener('touchend', thismouseup);
      oDiv2.addEventListener('touchmove', thismousemove);
      $(oDiv2).css("top",($("body").height()-120))
      function thismousedown(e) {
//          debugger
            isdrag = true;
            disY = e.touches[0].pageY;
      if((disY-disEndY)>0){               
                  if(h>$("body").height()){
                        moveY = $("body").height();
                        h-=$("body").height();
                  }else if(h<$("body").height()&&h>0){
                        moveY = h;
                        h = $(".wrap").height();
                  }
      }
            return false;
      }
      function thismousemove(e) {
            
            var h=$(".wrap").height()
            if(isdrag) {
                  var x = e.touches[0].pageY - disY;
                  //向下滑動
                  if((e.touches[0].pageY - disY) > 0 && Math.abs(e.touches[0].pageY - disY) < 100) {
                        if(Math.abs($(".div2").position().top-h2)>$("body").height()){
                              h1=$("body").height();
                              $(oDiv2).stop().animate({
                                    top: "+="+h1+"px"
                              }, 1000)
                        }else{
                              $(oDiv2).stop().animate({
                                    top: ($("body").height()-120)+"px"
                              }, 1000)
                        }
                        flag=true
                        return false;
                  }
                  //           向上滑動
                  if((e.touches[0].pageY - disY) < 0 && Math.abs(e.touches[0].pageY - disY) < 100) {
                        if(flag){
                              $(oDiv2).stop().animate({
                                    top: "-="+moveY+"px"
                              }, 1000)
                              if(moveY<$("body").height()){
                                    flag=false
                                    h = $(".wrap").height();
                              }
                        }                       
                        return false;
                  }
            }
      }
      function thismouseup(e) {
            isdrag = false;
      };
});</script>
</html>

原文作者:祈澈姑娘
原文連結:https://www.jianshu.com/u/05f416aefbe1
創作不易,轉載請告知

90後前端妹子,愛程式設計,愛運營,愛折騰。
堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家一起探討交流。
有個很難漲粉的的公眾號叫:【程式設計微刊】

轉載於:https://www.cnblogs.com/wangting888/p/9701745.html

相關文章