手动编写移动端横向滚动日历
function
showTime() {
var
show_day =
new
Array(
'日',
'一',
'二',
'三',
'四',
'五',
'六');
var
time =
new
Date(
new
Date(
new
Date(
new
Date(
"2018/02/20").
toLocaleDateString()).
getTime() -
86400000).
valueOf());
//获取零点，减去86400000是需求需要
var
year =
time.
getFullYear();
//年
var
month =
time.
getMonth() +
1;
//月
var
date =
time.
getDate();
//日
var
day =
time.
getDay();
//星期几
month <
10 ?
month =
'0' +
month :
month;
date <
10 ?
date =
'0' +
date :
date;
var
currentYear =
"";
" + year + '年' + "
" + month + '月' + "
//当前日期
var
startTime =
year +
"/" +
month +
"/" +
date;
//第十四天时间戳
//var lastTimeStamp = new Date(startTime).getTime() + 14 * 24 * 60 * 60 * 1000;
//第十四天时间
//var lastTime = new Date(lastTimeStamp);
var
canStamp =
new
Array();
var
calendar =
new
Array();
var
dataRule =
new
Array();
function
ifAddMonth(
time) {
var
obj = {};
if (
new
Date(
time).
getTime() ==
new
Date(
time).
setDate(
1)) {
obj.
addMonth =
"addMonth";
obj.
month =
new
Date(
new
Date(
time).
setDate(
1)).
getMonth() +
1;
obj.
year =
new
Date(
new
Date(
time).
setDate(
1)).
getFullYear()
}
else {
obj.
addMonth =
"";
obj.
month =
new
Date(
time).
getMonth() +
1;
obj.
year =
new
Date(
time).
getFullYear();
}
return
obj;
}
for (
var
i =
1;
i <
15;
i++) {
canStamp[
i] =
new
Date(
new
Date(
startTime).
getTime() +
i *
24 *
60 *
60 *
1000);
dataRule[
i] =
canStamp[
i].
getFullYear() +
'/' + (
canStamp[
i].
getMonth() +
1) +
'/' +
canStamp[
i].
getDate();
var
calday =
canStamp[
i].
getDate();
calday <
10 ?
calday =
'0' +
calday :
calday;
calendar[
i] =
"
"
"
+ calday + ""
}
$(
".nowTime").
html(
currentYear);
$(
".headDate").
append(
calendar.
toString().
replace(
/,/
g,
""));
if (!!
$(
".addMonth").
data()) {
var
newYear =
$(
".addMonth").
data(
"year"),
newMonth =
$(
".addMonth").
data(
"month");
$(
".addMonth").
before(
"
"
"
+ newMonth + '月' + "");
}
}
$(
function () {
showTime();
var
newYear =
$(
".addMonth").
data(
"year"),
newMonth =
$(
".addMonth").
data(
"month"),
oldYear =
new
Date(
$(
".headDate li").
eq(
0).
data(
"rule")).
getFullYear(),
oldMonth =
new
Date(
$(
".headDate li").
eq(
0).
data(
"rule")).
getMonth() +
1,
startX,
startY,
moveEndX,
moveEndY,
X,
Y;
$(
".headDate").
on(
"touchmove",
function (
e) {
$(
".nowTime").
css(
"position",
"fixed")
if (!!
$(
".second").
data(
"year")) {
if (
$(
".second").
offset().
left <
0) {
$(
".nowTime").
find(
"p").
eq(
0).
text(
newYear +
"年").
end().
eq(
1).
text(
newMonth >
10 ?
newMonth :
"0" +
newMonth +
"月");
}
else {
$(
".nowTime").
find(
"p").
eq(
0).
text(
oldYear +
"年").
end().
eq(
1).
text(
oldMonth >
10 ?
oldMonth :
"0" +
oldMonth +
"月");
}
}
});
$(
".headDate li").
on(
"click",
function () {
date =
$(
this).
data(
"rule");
vm.
mounted();
});
$(
".listBox").
on(
"touchstart",
function (
e) {
startX =
e.
originalEvent.
changedTouches[
0].
pageX,
startY =
e.
originalEvent.
changedTouches[
0].
pageY;
});
$(
".listBox").
on(
"touchend",
function (
e) {
moveEndX =
e.
originalEvent.
changedTouches[
0].
pageX,
moveEndY =
e.
originalEvent.
changedTouches[
0].
pageY,
X =
moveEndX -
startX,
Y =
moveEndY -
startY;
if (
Y <
0) {
//上滑
$(
".nowTime").
css(
"position",
"static");
}
else
if (
Y >
0) {
//下滑
$(
".nowTime").
css(
"position",
"fixed");
}
})
$(
".listBox").
on(
"touchmove",
function (
e) {
$(
".nowTime").
css(
"position",
"static");
})
})
html部分：
<
div
class=
"head"
>
<
div
class=
"nowTime"
>
div
>
<
ul
class=
"headDate"
>
ul
>
div
>
less部分：
.head{
width:
100%;
overflow-x:
scroll;
position:
relative;
height:
5rem;
}
.nowTime{
height:
5rem;
width:
5rem;
float:
left;
position:
fixed;
left:
0;
top:
0;
z-index:
9;
background-color:
#5aa5f0;
color:
#fff;
text-align:
center;
padding-left:
3%;
p{
width:
5rem;
height:
2.5rem;
line-height:
2.5rem;
text-align:
center;
}
:
nth-child(
1){
line-height:
3rem;
}
:
nth-child(
2){
line-height:
2rem;
}
}
.headDate{
display:
block;
width:
auto;
// height: 107px;
height:
5rem;
text-align:
center;
background-color:
#5aa5f0;
word-wrap:
none;
overflow:
hidden;
-webkit-overflow-scrolling:
touch;
overflow-x:
scroll;
color:
#fff;
padding-left:
3%;
padding-right:
3%;
margin:
0 ;
width:
230%;
position:
absolute;
left:
5rem;
top:
0;
li{
// width: 100px;
// height: 107px;
height:
5rem;
width:
5rem;
display:
block;
float:
left;
p{
// width: 100px;
// height: 53.5px;
// line-height: 53.5px;
width:
5rem;
height:
2.5rem;
line-height:
2.5rem;
text-align:
center;
}
:first-child{
line-height:
3rem;
}
:last-child{
font-size:
1.8rem;
line-height:
2rem;
}
&.first{
position:
fixed;
left:
0;
top:
0;
}
// &.second{
// position: fixed;
// left: 0;
// top: 0;
// }
}
.dataClick{
background-color:
#fff;
color:
#5aa5f0;
}
}