uniapp project
Requirements:
When you slide down, the data increases and the calendar title date above also changes.
When you slide up, the date in the calendar title above changes accordingly.
Implementation ideas:
- Load the data of the current month and the data of the next month for the first time this.getdate()
- Bottom loading next month’s data onReachBottom()
- Swipe up and listen to the page scroll onPageScroll() to get the height from the top res.scrollTop
- Divide the height from the top by the height of each data block and then round down. The obtained number is compared with the subscript of the data. If it is exactly equal, it means that you are staying in this data block. Then assign the year and month in the data to the label. (The specific code is implemented in the onPageScroll function)
Full text source code
<template>
<view class="u-p-b-150">
<u-sticky>
<view class="flex_spacebetween u-p-l-40 u-p-r-32 u-p-y-22 u-bg-007 u-color-fff">
<view class="u-flex u-f-s-38 u-f-w-600 u-c-p" @click.stop="">
<view>{<!-- -->{<!-- -->yue | MonthTrans}} {<!-- -->{<!-- -->nian}}</view>
<image src="@/static/img/law/you1.png" mode="" class="u-w-32 u-h-32 u-m-l-24"></image>
</view>
<view class="bianji" @click.stop="$u.route('/pages/time/edit')">Edit</view>
</view>
<!-- Day of the week -->
<view class="riqi u-flex u-p-x-24">
<view>Mon</view>
<view>Tue</view>
<view>Wed</view>
<view>Thu</view>
<view>Fri</view>
<view>Sat</view>
<view>Sun</view>
</view>
</u-sticky>
<!-- What number -->
<view class="u-flex wrap u-p-x-19 yuansu">
<view class="u-text-center u-m-t-24 hao " :class="item.choose?'haoAct':''" v-for="(item,i) in list" :key="i">
<view>{<!-- -->{<!-- -->item.name}}</view>
<view v-if="item.choose" class="u-p-t-10">{<!-- -->{<!-- -->item.hour}}hr</view>
</view>
</view>
<lawTabbar :current='2'></lawTabbar>
</view>
</template>
<script>
import {<!-- -->
lsLawyerTimeMonth
} from "@/api/index/index.js"
import lawTabbar from '@/components/lawTabbar.vue'
export default {<!-- -->
components: {<!-- -->
lawTabbar
},
data() {<!-- -->
return {<!-- -->
jinnian: '', // record the current time and year, do not change
jinyue: '', // record the current time and month, do not change
yuefen: '', // Current time example 2023-10-01 is used to pass value
nian: '', // used for page display
yue: '', // used for page display
nianyueri: '', // current 2022-2-12-01
xianianyueri: '', // next month 2022-2-12-01
list: [
// {choose:true,hour:'4hr',name:1},
],
scrollTop: 0
}
},
filters: {<!-- -->
MonthTrans(val) {<!-- -->
let result = null
switch (val) {<!-- -->
case 1:
return (result = 'January')
break
case 2:
return (result = 'February')
break
case 3:
return (result = 'March')
break
case 4:
return (result = 'April')
break
case 5:
return (result = 'May')
break
case 6:
return (result = 'June')
break
case 7:
return (result = 'July')
break
case 8:
return (result = 'August')
break
case 9:
return (result = 'September')
break
case 10:
return (result = 'October')
break
case 11:
return (result = 'November')
break
case 12:
return (result = 'December')
break
}
return result
},
},
onShow() {<!-- -->
this.list = [];
this.getdate();
},
onLoad(option) {<!-- -->
// this.getwidth();
//yuansu monitors a certain div to reach the top
},
// mounted(){<!-- -->
// window.addEventListener('scroll',this.handleScrollx,true)
// },
// // It is necessary to remove the listening event when the page is destroyed to avoid memory leaks
// beforeDestroy() {<!-- -->
// window.removeEventListener("scroll",this.handleScrollx);
// },
methods: {<!-- -->
// handleScrollx() {<!-- -->
// // console.log(this.list.length)
// console.log('scroll height',window.pageYOffset);
// },
// Get the current year and month
getdate() {<!-- -->
let that = this;
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var jinday = today.getDate();
this.jinnian = year;
this.jinyue = month;
// Get the number of days in each month
var day = new Date(year, month, 0).getDate();
console.log(month + 'month has' + day + 'day');
// this month
for (var i = 0; i < day; i + + ) {<!-- -->
this.list.push({<!-- -->
choose: false, // Whether to select
hour: 0, // total time
name: i + 1, // day
month: month, // month
nian: year, // year
riqi: year + '-' + month + '-' + (Number(i + 1) < 10 ? '0' + Number(i + 1) : Number(i +
1)) // Date 2023-11-18
});
}
// Get the day of the week that the 1st of each month is
let one = month + '/1' + '/' + year; // 10/1/2023
// var weekArr = ['Sunday','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var weekArr = ['0', '1', '2', '3', '4', '5', '6'];
var week = weekArr[new Date(one).getDay()];
console.log(month + 'The 1st of the month is the week' + week);
let arr = []
if (week == 2) {<!-- -->
arr = [{<!-- -->
name: ''
}]
} else if (week == 3) {<!-- -->
arr = [{<!-- -->
name: ''
}, {<!-- -->
name: ''
}]
} else if (week == 4) {<!-- -->
arr = [{<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}]
} else if (week == 5) {<!-- -->
arr = [{<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}]
} else if (week == 6) {<!-- -->
arr = [{<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}]
} else if (week == 0) {<!-- -->
arr = [{<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}, {<!-- -->
name: ''
}]
}
this.list = arr.concat(this.list);
this.yuefen = year + '-' + month + '-01';
this.nianyueri = year + '-' + month + '-' + jinday;
\t\t\t
this.nian = year;
this.yue = month;
uni.showLoading({<!-- -->
title:'Loading'
});
\t\t\t\t
this.getlist();
setTimeout(function() {<!-- -->
that.jiaFun();
}, 300);
},
jiaFun() {<!-- -->
//Add 1 to the month
var date2 = new Date(this.nianyueri);
date2.setMonth(date2.getMonth() + 1);
this.xianianyueri = this.DateToString(date2, 'yyyy-MM-dd')
// console.log(this.xianianyueri,'next month');
var today1 = new Date(this.xianianyueri);
var year1 = today1.getFullYear();
var month1 = today1.getMonth() + 1;
var jinday1 = today1.getDate();
// Get the number of days in the next month
var day1 = new Date(year1, month1, 0).getDate();
console.log(this.xianianyueri + 'how many days' + day1)
for (var i = 0; i < day1; i + + ) {<!-- -->
this.list.push({<!-- -->
choose: false, // Whether to select
hour: 0, // total time
name: i + 1, // day
month: month1, // month
nian: year1, // year
riqi: year1 + '-' + month1 + '-' + (Number(i + 1) < 10 ? '0' + Number(i + 1) : Number(i +
1)) // Date 2023-11-18
});
}
console.log(this.list, 'all')
\t\t\t\t
this.yuefen = this.xianianyueri;
this.getlist();
},
// month plus 1
DateToString(date, fmt) {<!-- -->
var o = {<!-- -->
'Q + ': Math.floor((date.getMonth() + 3) / 3), // Quarter
'M + ': date.getMonth() + 1, // month
'd + ': date.getDate(), // day
'h + ': (date.getHours() % 24 == 0) ? '00' : date.getHours() % 24, // hours
'H + ': date.getHours(), // hours
'm + ': date.getMinutes(), // minutes
's + ': date.getSeconds(), // seconds
'f + ': date.getMilliseconds() // milliseconds
};
var week = {<!-- -->
'0': '/u65e5',
'1': '/u4e00',
'2': '/u4e8c',
'3': '/u4e09',
'4': '/u56db',
'5': '/u4e94',
'6': '/u516d'
};
if (/(y + )/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
if (/(E + )/.test(fmt))
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '/u661f/u671f' : '/u5468') :
'') + week[date.getDay() + '']);
for (var k in o) {<!-- -->
if (k == 'f + ') {<!-- -->
if (new RegExp('(' + k + ')').test(fmt)) {<!-- -->
var regExp0 = '000000000' + o[k];
fmt = fmt.replace(RegExp.$1, regExp0.substr(regExp0.length - RegExp.$1.length));
}
} else {<!-- -->
if (new RegExp('(' + k + ')').test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k] )
.length)));
}
}
return fmt;
},
getlist() {<!-- -->
\t\t\t
let data = {<!-- -->
yuefen: this.yuefen,
lawyerId: uni.getStorageSync('lawyerId')
}
lsLawyerTimeMonth(data).then(res => {<!-- -->
uni.hideLoading();
res.rows.forEach(item => {<!-- -->
this.list.forEach(itemdata => {<!-- -->
if (item.riqi == itemdata.riqi) {<!-- -->
itemdata.choose = true;
itemdata.hour = item.zongTime;
}
});
});
});
}
},
//Listen to page scrolling
onPageScroll(res) {<!-- -->
let that = this;
let a = 0
a = res.scrollTop / 300;
a = parseInt(a);
if (a == 0) {<!-- -->
that.nian = this.jinnian;
that.yue = this.jinyue;
} else {<!-- -->
that.list.forEach((item, i) => {<!-- -->
if (i / 29 == a + 1) {<!-- -->
that.nian = item.nian;
that.yue = item.month;
}
});
}
},
// Bottom loading
onReachBottom() {<!-- -->
console.log('Bottom loading', this.yue, this.nian);
console.log('current month', this.yuefen);
var date = new Date(this.yuefen);
date.setMonth(date.getMonth() + 1);
this.yuefen = this.DateToString(date, 'yyyy-MM-dd');
var today1 = new Date(this.yuefen);
var year1 = today1.getFullYear();
var month1 = today1.getMonth() + 1;
var jinday1 = today1.getDate();
// Get the number of days in the next month
var day1 = new Date(year1, month1, 0).getDate();
console.log(this.yuefen + 'How many days' + day1)
for (var i = 0; i < day1; i + + ) {<!-- -->
this.list.push({<!-- -->
choose: false, // Whether to select
hour: 0, // total time
name: i + 1, // day
month: month1, // month
nian: year1, // year
riqi: year1 + '-' + month1 + '-' + (Number(i + 1) < 10 ? '0' + Number(i + 1) : Number(i +
1)) // Date 2023-11-18
});
}
\t
this.nian = year1;
this.yue = month1;
this.getlist();
},
// onPullDownRefresh() {<!-- -->
// this.pageNum = 1;
// this.getlist();
// setTimeout(function() {<!-- -->
// uni.stopPullDownRefresh();
// }, 1000);
// }
}
</script>
<style lang='scss' scoped>
.bianji {<!-- -->
width: 120rpx;
height: 56rpx;
border-radius: 28rpx;
border: 2rpx solid #FFFFFF;
font-size: 30rpx;
font-family: Helvetica-Bold, Helvetica;
font-weight: bold;
line-height: 56rpx;
text-align: center;
cursor: pointer;
}
/*
750 - 48 / 7 == 100
2200 - 48 / 7 == 307
*/
.riqi {<!-- -->
background: #F7F7F7;
font-size: 30rpx;
font-family: Helvetica;
padding: 30rpx 0;
view {<!-- -->
cursor: pointer;
width: 100rpx;
text-align: center;
}
}
.hao {<!-- -->
font-size: 30rpx;
font-family: Helvetica;
padding-top: 16rpx;
height: 124rpx;
border-radius: 8rpx;
width: 96rpx;
box-sizing: border-box;
margin: 0 3rpx;
}
.haoAct {<!-- -->
background: #E5F7FF;
color: #0078B2;
font-family: Helvetica-Bold, Helvetica;
font-weight: bold;
}
@media only screen and (min-width: 750px) {<!-- -->
.riqi {<!-- -->
view {<!-- -->
width: 307rpx;
}
}
.hao {<!-- -->
width: 302rpx;
}
}
</style>```