明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1277, 文章 - 0, 评论 - 214, 阅读 - 320万
  博客园  :: 首页  :: 管理
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

使用js代码制作H5页面的底部收缩和展开的滑动面板。

Posted on   且行且思  阅读(665)  评论(0)  编辑  收藏  举报

百度地图这个应用上，有个点击了某个地点后，会在底部弹出一个滑动面板，这个面板可以滑动，然后我就是使用了js代码，制作了一个功能一样的、h5页面上的滑动面板。

首先html定义一个div作为滑动面板。

这个div之所以能够滑动，其实就是改变了他的top属性和height属性，当top减少1px，height增加1px时，他看上去就是被拖上去了1px。

所以我们只需要捕捉到移动端的单击、滑动、离开等动作，就可以进行判断该如果去控制滑动面板的属性了。而捕捉那些动作的api是也是现成的。也就是touchstart，touchmove和touchend三个。接下来上关键代码：

 

复制代码
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta  name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"  />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>使用js代码制作H5页面的底部滑动面板。</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

  </head>

  <body>
    <a
      class="easyui-linkbutton"
       
      style="
        display: block;
        height: 100px;
        width: 100%;
        text-align: center;
        border: #eee solid 1px;
        background-color: antiquewhite;
      "
      ><b style="width: 500px; text-align: center; font-size: 16px;">面板, 注意这是移动端页面下效果，使用Google Chrome F12 进行调试</b></a
    >

    <div id="slideBoard" 
    style="background-color: #0fffff;  left: 0px; width: 100%; position: absolute; height: 50px; " >
</div>

    <script type="text/javascript">
    var countClick = 1; //按钮点击次数
    var initRate = 0.75; // 滑动面板初始显示比例
    var mobileOldY = 0; //手机端记录初始点击y轴的值
    var moblieTop = 0; //记录初始点击时滑板的top值
    var mobileOldTIME = new Date().getTime();//记录初始点的时间
    //PC阻止滚动条
    //document.documentElement.style.overflowY = 'hidden';  


      var slideBoard = document.getElementById("slideBoard");
      slideBoard.style.top = Math.ceil($(window).height() * initRate) + "px";
      slideBoard.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";

      //document.addEventListener("touchstart", touchStart);

      //Unable to preventDefault inside passive event listener due to target being treated a
      //浏览器忽略 preventDefault() 就可以第一时间滚动了
      window.addEventListener("touchstart", touchStart, { passive: false });

      //滑动开始事件  mobile
    function touchStart(e) {         
         if(countClick == 1 && e.touches[0].clientY >= parseInt(slideBoard.style.top)){   
             mobileOldY = e.touches[0].clientY;
             moblieTop = parseInt(slideBoard.style.top);
             mobileOldTIME = new Date().getTime();
             
            //  document.addEventListener('touchmove', touchMove);               
            //  document.addEventListener('touchend', touchEnd);  

            //Unable to preventDefault inside passive event listener due to target being treated a
            //浏览器忽略 preventDefault() 就可以第一时间滚动了
            window.addEventListener("touchmove", touchMove, { passive: false });
            window.addEventListener("touchend", touchEnd, { passive: false });
         }
     }  
     function touchMove(e){
         e.preventDefault();
         var y = e.touches[0].clientY - mobileOldY;
         slideBoard.style.top = moblieTop + y + "px";
         slideBoard.style.height = $(window).height() - y - moblieTop + "px";
         if (parseInt(slideBoard.style.top) < 0) {
             slideBoard.style.top = 0;
         }
         if (parseInt(slideBoard.style.top) > Math.ceil($(window).height()
                 * initRate)) {
             slideBoard.style.top = Math.ceil($(window).height() * initRate) + "px";
             slideBoard.style.height = Math.ceil($(window).height() * (1 - initRate)) + "px";
         }
     }
     
     function touchEnd(e){         
         document.removeEventListener('touchmove', touchMove);  
         document.removeEventListener('touchend', touchEnd);

         var dist = mobileOldY - e.changedTouches[0].clientY;
         var time = new Date().getTime() - mobileOldTIME; 
         if(dist/time > 0.5){
             moveSlideBoardTo(2);
             return;
         }
         if(dist/time < -0.5){
             moveSlideBoardTo(0);
             return;
         }
         if(parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.1) ){
             moveSlideBoardTo(2);
         }else if(parseInt(slideBoard.style.top) < Math.ceil($(window).height() * 0.5) ){
             moveSlideBoardTo(1);
         }else{
             moveSlideBoardTo(0);
         }  
     }


        var loopCount = 0;
        var loopID;
        //移动滑板到某位置  mobile PC
        function moveSlideBoardTo(location) {
            var moveTime = 100;
            var moveIntervalTime = 10;
            var locationRate = 1;
            var rate = moveTime / moveIntervalTime;
            loopCount = 0;
            if (location == 0) {
                locationRate = 0.25;
            } else if (location == 1) {
                locationRate = 0.75;
            } else {
                locationRate = 1;
            }

            if (Math.ceil((1 - locationRate) * $(window).height()) == parseInt(slideBoard.style.top)) {
                return;
            } else if (Math.ceil((1 - locationRate) * $(window).height()) < parseInt(slideBoard.style.top)) {
                //需要上升
                var dist = parseInt(slideBoard.style.top) - (1 - locationRate) * $(window).height();
                var perdist = Math.ceil(dist / rate);
                loopID = setInterval("moveUp(" + perdist + "," + rate + "," + locationRate + ")", moveIntervalTime); 

            } else {
                //下降
                var dist = (1 - locationRate) * $(window).height() - parseInt(slideBoard.style.top);
                var perdist = Math.ceil(dist / rate);
                loopID = setInterval("moveDown(" + perdist + "," + rate + "," + locationRate + ")", moveIntervalTime);
            }
        } 

        //上移函数
        function moveUp(perdist, rate, locationRate) {
            if (loopCount != rate) {
                slideBoard.style.top = parseInt(slideBoard.style.top) - perdist + "px";
                slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
                loopCount = loopCount + 1;
            } else {
                slideBoard.style.top = Math.ceil((1 - locationRate) * $(window).height()) + "px";
                slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
                clearInterval(loopID);
            }
        }

        //下移函数
        function moveDown(perdist, rate, locationRate) {
            if (loopCount != rate) {
                slideBoard.style.top = parseInt(slideBoard.style.top) + perdist + "px";
                slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
                loopCount = loopCount + 1;

            } else {
                slideBoard.style.top = Math.ceil((1 - locationRate) * $(window).height()) + "px";
                slideBoard.style.height = $(window).height() - parseInt(slideBoard.style.top) + "px";
                clearInterval(loopID);
            }
        }
    </script>
  </body>
</html>
复制代码

 

其中moveSlideBoardTo函数是让滑动面板的top等于某个特定的值的，因为我想学百度地图那样，使滑动面板会移动到固定的3个位置，其实分别就是初始位置、80%的位置，
和顶部。
这段代码的逻辑主要就是当手触屏的时候开始判断是否落在面板区域内，如果是的话，手指如果滑动，就进行跟着手指使面板的top和height属性进行相同变化，这样就看上去
是跟着手指在动了。

相关博文：
· 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle
· js 用**遮罩身份证以及手机号中间部位，进行掩码处理
· JS实现页面滑到底部加载下一页数据
· 开发 H5 滑动
· 实现可移动悬浮按钮(微信小程序/H5移动端html)
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae