由于是用uniapp寫的舒裤，所以在網(wǎng)頁上也可以用另锋，先上預覽圖
日歷.gif
主要功能：
- 點擊選中樣式
- 滑動跳轉月份
- 點擊非本月日期跳轉相應月份
一、css部分
css樣式原理如下望伦，紅色框為用戶視圖疹启。拖拉的時候改變left數(shù)值就可以了古程。
視圖.png
小tips：
當寬度為自適應，不知道具體數(shù)值喊崖，而需要用寬度計算時挣磨，可以用padding-bottom。這樣我們就可以一行放下七個圓形了荤懂。
.day-item{
width: 14%;
display: block;
border-radius: 50%;
padding-bottom: 100%;
height: 0;
}
所有css如下：
數(shù)字偏上是預留位置給當天的狀態(tài)顯示茁裙。
.module{
width: 92%;
margin: 15px auto;
background-color: #fff;
border-radius:16px;
padding: 30rpx 20rpx;
overflow: hidden;
.threeMonth{
display: flex;
width: 300%;
position: relative;
}
.title{
font-size: 35rpx;
font-weight: bold;
padding-bottom: 30rpx;
}
.day{
display: flex;
position: relative;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
text-align: center;
align-content: flex-start;
.active{
background-color: #1972F0;
color: #fff;
}
}
.day-item{
width: 14%;
text{
display: block;
border-radius: 50%;
width: 100%;
padding-top: calc(50% - 1em);
padding-bottom: calc(50% + 1em);
height: 0;
}
}
}
二、template部分
<view class="day">
<view class="day-item" v-for="(item,index) in ['日','一','二','三','四','五','六']">
{{item}}
</view>
</view>
<!-- 日期 -->
<view
class="threeMonth"
@touchstart='touchstart'
@touchmove='touchmove'
@touchend='touchend'
:style="'left:calc(-100% + '+dayLeft+'px)'"
>
<!-- 遍歷集合三個月的列表 -->
<view class="day"
v-for="(item,index) in monthList"
:key="index"
>
<!-- 遍歷每個月的天數(shù) -->
<view
class="day-item"
v-for="(item2,index2) in item"
:key="index2"
@click="dayClick(index2)"
>
<!-- 不是本月的天數(shù)顏色為灰色 -->
<text :class="item2.className" :style="item2.fromMonth=='nowMonth'?'':'color:#c8c9cc;'">{{item2.day}}</text>
</view>
</view>
</view>
三节仿、js部分
功能與解釋都在注釋中寫明晤锥。
<script>
export default {
data() {
return {
nowYear:new Date().getFullYear(),//獲取年份
nowMonth:new Date().getMonth()+1,//獲取月份
monthList:[],
dayLeft: 0,
startLeft: 0
}
},
created() {
/*調(diào)用初始化當前考勤*/
this.getThreeMonth();
},
methods: {
// 日期模塊點擊
touchstart(e){
// 記錄初始點擊位置
this.startLeft = e.touches[0].pageX
},
// 日期模塊拖動
touchmove(e){
this.dayLeft = e.touches[0].pageX - this.startLeft
},
// 日期模塊松手
touchend(e){
// 根據(jù)移動距離判斷跳轉上一月還是下一月
if(this.dayLeft>100 )this.syy()
if(this.dayLeft<-100 )this.xyy()
this.dayLeft = 0
},
/*獲取上一月*/
syy(){
if (this.nowMonth==1){
this.nowYear=parseInt(this.nowYear)-1;
this.nowMonth=12;
this.getThreeMonth();
return;
}
this.nowMonth=parseInt(this.nowMonth)-1;
this.getThreeMonth();
},
/*獲取下一月*/
xyy(){
if (this.nowMonth==12){
this.nowYear=parseInt(this.nowYear)+1;
this.nowMonth=1;
this.getThreeMonth();
return;
}
this.nowMonth=parseInt(this.nowMonth)+1;
this.getThreeMonth();
},
/*閏年 時間判斷*/
isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
},
//獲取某月日期
getCalendar(Year,Month){
//每個月的天數(shù)
var days_per_month = new Array(31, 28 + this.isLeap(Year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dateList = [];
//獲取本月的一號是星期幾 0星期天
var s=new Date(Year + '/' + Month + '/' + '01').getDay();
//上月月份
var lastMonth = Month==1? 12: Month-1
// 上月天數(shù)
var lastMonthDay = days_per_month[lastMonth - 1]
// 補上 上月日期
for(var i = s-1; i >= 0; i--) {
var day = parseInt(lastMonthDay)-i;
dateList.push({
day,
fromMonth: 'lastMonth',
className: ''
})//獲取上月末尾天數(shù) 補齊本月日歷顯示
}
// 當月天數(shù)
var nowMonthDay = days_per_month[Month - 1]
// 添加當月日期
for(var j = 0; j < nowMonthDay; j++) {
dateList.push({
day: j+1,
fromMonth: 'nowMonth',
className: ''
})
}
//獲取本月最后一天是星期幾 0星期天
var l =new Date(Year + '/' + Month + '/' + nowMonthDay).getDay();
if(l < 6){
// 補上 下月日期
for(var i = 1; i <= 6-l; i++) {
dateList.push({
day: i,
fromMonth: 'nextMonth',
className: ''
})
}
}
return dateList
},
// 獲取三月日期
getThreeMonth(){
let year,month
this.monthList = []
// 獲取上一月日歷
if (this.nowMonth==1){
year = parseInt(this.nowYear)-1;
month = 12
}else{
year = this.nowYear
month = parseInt(this.nowMonth)-1;
}
this.monthList.push(this.getCalendar(year,month))
// 獲取當前月日歷
this.monthList.push(this.getCalendar(this.nowYear,this.nowMonth))
// 獲取下一月日歷
if (this.nowMonth==12){
year = parseInt(this.nowYear)+1;
month = 1
}else{
year = this.nowYear
month = parseInt(this.nowMonth)+1;
}
this.monthList.push(this.getCalendar(year,month))
},
//點擊某一天
dayClick(Index){
// 如果 點擊本月的日期
if(this.monthList[1][Index].fromMonth=='nowMonth'){
this.monthList[1].map((item,inx)=>{
if(Index == inx){
item.className = 'active'
}else{
item.className = ''
}
})
return
}
//點擊 哪一天
let day = this.monthList[1][Index].day
if(this.monthList[1][Index].fromMonth=='nextMonth'){
// 如果 點擊下一月的日期 跳轉下一月
this.xyy()
}else if(this.monthList[1][Index].fromMonth=='lastMonth'){
// 如果 點擊上一月的日期 跳轉上一月
this.syy()
}
//對應日期 選中狀態(tài)
let indx = this.monthList[1].findIndex(e => e.fromMonth=='nowMonth'&&e.day==day)
this.monthList[1][indx].className = 'active'
},
},
}
</script>
四、結語
好了廊宪，基本上就這些矾瘾。感覺js寫的有點笨。如果有不懂的 或者 有更好的方法請在評論區(qū)告訴我箭启，謝謝壕翩！
