使用js代码制作H5页面的底部滑动面板。

最新推荐文章于 2022-09-20 14:58:46 发布

周星星123

最新推荐文章于 2022-09-20 14:58:46 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/u010368344/article/details/68946832

本文介绍如何使用JavaScript代码创建一个类似于百度地图的H5页面底部滑动面板。通过监听移动端的touchstart, touchmove, touchend事件，实现面板的滑动效果。" 120349206,5772184,使用jmap诊断Java应用：导出堆转储与内存分析,"['Java诊断', '内存管理', 'JVM工具', '性能分析', '故障排查']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

直接上代码讲了。

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

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

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

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

//滑动开始事件  mobile
    function touchStart(e) {  
    	 
        if(countClick == 1 && e.touches[0].clientY >= parseInt(sli

最低0.47元/天解锁文章

200万优质内容无限畅学