滑动选择日期(基于sui-mobile的移动端)

Posted 前端渣的博客园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滑动选择日期(基于sui-mobile的移动端)相关的知识,希望对你有一定的参考价值。

 1      $(page).on(\'touchmove\',\'#touchMoveTime\',function (event) {
 2             touchMove(event);
 3         });
 4         scrollBarInit(); //初始化
 5         function scrollBarInit() {
 6             var defaultValue = 3,maxValue = 30;
 7             var myDate = new Date();
 8             var year = myDate.getFullYear();
 9             var month = myDate.getMonth() + 1;      //获取当前月份(0-11,0代表1月)
10             var date = myDate.getDate();
11             var day = new Date(year,month,0);
12             var daycount = day.getDate(); //获取本月天数:
13             if((date + defaultValue) > daycount){
14                 if(month == 12){
15                     month = 1;
16                     year = year + 1;
17                 }else{
18                     month = month + 1;
19                 }
20                 date = (date + defaultValue) - daycount;
21             }else{
22                 date = date + defaultValue;
23             }
24             if(month < 10){
25                 month = "0"+month;
26             }
27             if(date < 10){
28                 date = "0"+date;
29             }
30 
31             $("#endTime").attr(\'value\',year+\'-\'+month+\'-\'+date);
32             var currentX = $("#touchMoveTime").width() * (0 / maxValue);
33             $(\'#scroll_Track\').css({width:currentX+"px"});
34             $(\'#scroll_Thumb\').css({transform:\'translate(\' + currentX  + \'px, 0)\'});
35 
36         };
37         function touchMove(event) {
38             event.preventDefault();
39             if (!$(\'#scroll_Thumb\') || !event.touches.length) return;
40             var defaultValue = 3,maxValue = 30;
41             var myDate = new Date();
42             var year = myDate.getFullYear();
43             var month = myDate.getMonth() + 1;      //获取当前月份(0-11,0代表1月)
44             var date = myDate.getDate();
45 
46             var tran_currentX = \'\';
47             var startOffset = parseInt($(\'#touchMoveTime\').offset().left);
48             var endOffset = parseInt($(\'#touchRight\').offset().left);
49             var _limit = endOffset - startOffset;
50             var touchMoveTimeOffsetLeft = $(\'#scroll_Track\').offset().left;
51             var touch = event.touches[0];
52             var endX = touch.pageX;
53             var currentX = endX - touchMoveTimeOffsetLeft;
54             var Timevalue = Math.round(maxValue * (currentX / $("#touchMoveTime").width()));  //当前刻度值
55             if(Timevalue < defaultValue){
56                 Timevalue = defaultValue
57             }else if(Timevalue > maxValue){
58                 Timevalue = maxValue;
59             }
60             if(currentX < _limit && currentX > 15){
61                 $(\'#days\').text(Timevalue);
62                 $(\'#scroll_Track\').css({width:currentX+"px"});
63                 if(currentX < 20){
64                     tran_currentX = 0
65                 }else{
66                     tran_currentX = currentX - 20;
67                 }
68                 $(\'#scroll_Thumb\').css({transform:\'translate(\' + tran_currentX + \'px, 0)\'});
69 
70                 var day = new Date(year,month,0);
71                 var daycount = day.getDate(); //获取本月天数
72                 if((date + Timevalue) > daycount){
73                     if(month == 12){
74                         month = 1;
75                         year = year + 1;
76                     }else{
77                         month = month + 1;
78                     }
79                     date = (date + Timevalue) - daycount;
80                 }else{
81                     date = date + Timevalue;
82                 }
83                 if(month < 10){
84                     month = "0"+month;
85                 }
86                 if(date < 10){
87                     date = "0"+date;
88                 }
89                 $(\'#endTime\').attr(\'value\',year+\'-\'+month+\'-\'+date);
90             }
91         }
1 <div class="clList">
2   <span class="cl-15 pull-left">3天</span>
3    <div id="touchMoveTime" class="jzrqDiv cl-70 pull-left">
4           <div id="scroll_Track"></div>
5         <div class="spirit icon" id="scroll_Thumb">&#xe669;</div>
6    </div>
7    <span class="cl-15 pull-left text-right" id="touchRight">30天</span>
8 </div>
1 .jzrqDiv{position:relative; top:15px; height: 10px; border-radius: 20px; background: #efefef; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
2 #scroll_Track{ position: absolute; top:0; height: 10px; border-radius: 20px; background: #2399dc; z-index: 10;}
3 .spirit {position: absolute; top:-9px; width: 30px;height: 30px;line-height: 30px;font-size: 30px;border-radius: 50%;color: #ddd; background: #fff; z-index: 11;transform: translate(0,0);}

效果如下:

 

以上是关于滑动选择日期(基于sui-mobile的移动端)的主要内容,如果未能解决你的问题,请参考以下文章

关于移动端滑动手势

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动滚动插件

Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动滚动插件

基于slideout.js实现的移动端侧边栏滑动特效

vue移动端开发列表左边固定右边可以左右滑动上下滑动同步?

利用MUI滑动进行利息计算(移动端APP显示)