原生js实现移动端时间滑动选择器

最新推荐文章于 2024-11-07 15:31:09 发布

xiao_chen00012

最新推荐文章于 2024-11-07 15:31:09 发布

阅读量3.5k

点赞数 3

分类专栏：前端练习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xiao_chen00012/article/details/126411458

版权

这篇博客分享了作者如何使用原生JavaScript实现移动端的时间滑动选择器。通过CSS的`scroll-snap-type`属性和JavaScript代码来完成功能，同时处理了因不同月份天数不同而带来的问题。

摘要由CSDN通过智能技术生成

boss上遇到一个HR要求写一个移动端的招聘界面，发现这个时间滑动选择器好像确实没有多少人做，不知道是直接用插件还是咋的，反正练习一下自己手写了一下，具体效果图如上

以下是css+html片段

<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .select {
      display: none;
      position: fixed;
      justify-content: space-evenly;
      align-items: center;
      bottom: 0;
      width: 100%;
      height: 20vh;
    }
    .opt {
      flex: 1;
      height: 20vh;
      overflow: auto;
      scroll-snap-type: y mandatory;
      /* 使用 scroll-snap-type 让子元素滚动 参数y为轴 mandatory为停止后自动偏移到选项上*/
      -ms-overflow-style: none;
      /* IE 10+ */
    }

    /* 清除滚动条 */
    ::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }
    .select ul {
      display: flex;
      flex-direction: column;
      flex: 1;
      mar