移动端iscroll实现日期选择

Posted 2020-08-31 明媚下雨天

哎，说多了都是泪；

引入相关JS文件

 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="js/iscroll.js"></script>

样式

 /*日期选择*/
    .date{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
        background-color:rgba(0,0,0,.3);
    }
    .date .date-piker{
        width:750px;
        background-color:#fff;
        font-size:26px;
        position:absolute;
        bottom:0
    }
    .date .date-piker .tit{
        height:80px;
        line-height:80px;
        background-color:#f4f4f4;
        color:#474747;
        padding:0 26px;
        text-align:center
    }
    .date .date-piker .tit a{
        color:#ff6315;
        float:left
    }
    .date .date-piker .tit a:last-child{
        float:right
    }
    .date .time-box{
        height: 420px;
        overflow: hidden;
        position: relative;
        width: 100%;
        padding:0 45px
    }
    .date .time-choose{
        height: 70px;
        border-top:1px solid #efefef;
        border-bottom:1px solid #efefef;
        position: absolute;
        top: 140px;
        left:-90px;
        width: 100%;
        background-color:#fff
    }
    .date .time-01, .time-02, .time-03{
        position:absolute;
        z-index: 3;
        height:420px;
        overflow:hidden
    }
    .date .time-02{
        left:240px
    }
    .date .time-03{
        left:480px
    }
    .date .time-box li{
        height:70px;
        line-height:70px;
        color:#474747;
        text-align: center;
        font-family:Helvetica;
        width: 220px
    }

html代码实现

  <div class="date">
        <div class="date-piker">
            <div class="tit"><a id="kidding">取消</a><span>保养时间</span><a id="sure">确定</a></div>
            <div class="time-box">
                <div class="time-choose"></div>
                <div class="time-01" id="month">
                    <div>
                        <ul>
                            <li></li>
                            <li></li>
                     
                            <li>4月</li>
                            <li>5月</li>
                            <li>6月</li>
                            <li>7月</li>
                     
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="time-02" id="date">
                    <div>
                        <ul>
                            <li></li>
                            <li></li>

                            <li>1日</li>
                            <li>2日</li>
                            <li>3日</li>
                            <li>4日</li>
                            <li>5日</li>
                    
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="time-03" id="time">
                    <div>
                        <ul>
                            <li></li>
                            <li></li>
                      
                            <li>10:00</li>
                            <li>15:00</li>
                            <li>16:00</li>
                            <li>17:00</li>
                            <li>18:00</li>
                
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

JS效果添加

 /*日期选择*/
    /*此处存在问题  这个时间上 关于月份 每个天数都不一样 需要动态生成*/
    $(‘.date_sure‘).click(function(){
        $(‘.date‘).show();
        //滚动效果
        scrolling();

        //确认结果
        $(‘#sure‘).click(function(){
            if(getContent("#month")){
               //获取各个div中ul li中选中的内容
                $(‘.date_sure‘).html(getContent("#month") +getContent("#date")+‘ ‘+ getContent("#time"));
                $(‘.date‘).hide();
            }
        });
        $(‘#kidding‘).click(function(){
            $(‘.date‘).hide();
        });
        var myScroll;

        function scrolling(){
            myScroll = new IScroll(‘#date‘, {
                scrollY: true,
                momentum: false,
                snap: ‘li‘
            });
            myScroll = new IScroll(‘#time‘, {
                scrollY: true,
                momentum: false,
                snap: ‘li‘
            });
            myScroll = new IScroll(‘#month‘, {
                scrollY: true,
                momentum: false,
                snap: ‘li‘
            });

        }

        function getContent(ele){
            //找到里层div
            var $content = $(ele).find(‘div‘);
            //获取一个li的高度
            var _height=$(ele).find(‘li‘).height();
            //为内层div添加transform移动效果
            var tran = $content.css(‘transform‘);
            var topArray=[];
            //将获取到的内容 变成数组  最后一个为移动距离top
            topArray=tran.split(‘,‘);
            var top=Math.floor(parseFloat(topArray[5]));
            //获取到移动的个数 减去空的两个li 
            var num=top/_height-2;
            //返回对应选择出来的li的内容
            return $(ele+" li").eq(-num).text();
        }
    });                

完成了 这个日期的选择