用原生JS+JQ写的picker选择器

最新推荐文章于 2024-04-26 09:56:27 发布

Mack_yong

最新推荐文章于 2024-04-26 09:56:27 发布

阅读量365

点赞数 4

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/u011053926/article/details/137967002

版权

分享一个用JQ写的picker选择器，本想从头自己写的，但没啥思路就去网上有没有大佬写出来。
然后终于找到了，然后自己做了一些修改，现在完美运行。

先看看运行效果

在这里插入图片描述
我现在这个可以根据当月显示到对应的月份的，也可以点击确认获取选中的数据下面来看看代码：

    <button id="btn">选择日期</button>
    <div class="show"></div>
    <div class="dateBox">
        <div class="date-title">
            <span class="date-title-close" style="color: #808080;">关闭</span>
            <span class="date-title-text">选择日期</span>
            <span class="date-title-submit" style="color: #fb2c63;">确认</span>
        </div>
        <div class="date-content">
            <div class="current-date"></div>
            <!-- 年份 -->
            <div class="picker-columnitem">
                <div class="scroller-component" data-role="component">
                    <div class="scroller-mask" data-role="mask"></div>
                    <div class="scroller-indicator" data-role="indicator"></div>
                    <div class="scroller-content" data-role="content" style=" transform: translate3d(0px, -36px, 0px);">
                        <div class="scroller-item">2024年</div>
                        <div class="scroller-item">2023年</div>
                        <div class="scroller-item">2022年</div>
                        <div class="scroller-item">2021年</div>
                        <div class="scroller-item">2020年</div>
                        <div class="scroller-item">2019年</div>
                        <div class="scroller-item">2018年</div>
                        <div class="scroller-item">2017年</div>
                        <div class="scroller-item">2016年</div>
                        <div class="scroller-item">2015年</div>
                        <div class="scroller-item">2014年</div>
                        <div class="scroller-item">2013年</div>
                        <div class="scroller-item">2012年</div>
                        <div class="scroller-item">2011年</div>
                    </div>
                </div>
            </div>
            <!-- 月份 -->
            <div class="picker-columnitem">
                <div class="scroller-component" data-role="component">
                    <div class="scroller-mask" data-role="mask"></div>
                    <div class="scroller-indicator" data-role="indicator"></div>
                    <div class="scroller-content" data-role="content" style=" transform: translate3d(0px, -36px, 0px);">
                        <div class="scroller-item" data-value="1">1月</div>
                        <div class="scroller-item" data-value="2">2月</div>
                        <div class="scroller-item" data-value="3">3月</div</