【h5 uniapp】 滚动 滚动条，数据跟着变化

uniapp项目

在这里插入图片描述

需求：
向下滑动时，数据增加，上方的日历标题日期也跟着变化
向上滑动时，上方的日历标题日期跟着变化

实现思路：

  1. 初次加载目前月份的数据 以及下个月的数据 this.getdate()
  2. 触底加载 下个月份的数据 onReachBottom（）
  3. 向上滑动，监听页面滚动onPageScroll（） 得到 距离顶部的高度 res.scrollTop
  4. 距离顶部的高度 除以 每个数据块的 高度 再 向下取整 ，得到的数 与 数据的下标 做对比 刚好等于的 说明 正停留在这个数据块，再把数据中的年和月赋值给标签（具体代码实现在 onPageScroll 函数 里）

全文源码

<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><!-- 周几 --><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><!-- 几号 --><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: '', // 记录 当前时间年份，不改变jinyue: '', // 记录 当前时间月份，不改变yuefen: '', // 当前时间  示例 2023-10-01  传值用nian: '', // 页面显示用yue: '', // 页面显示用nianyueri: '', // 现在的 2022-2-12-01xianianyueri: '', // 下一个月份 2022-2-12-01list: [// {choose:true,hour:'4hr',name:1},],scrollTop: 0}},filters: {MonthTrans(val) {let result = nullswitch (val) {case 1:return (result = 'January')breakcase 2:return (result = 'February')breakcase 3:return (result = 'March')breakcase 4:return (result = 'April')breakcase 5:return (result = 'May')breakcase 6:return (result = 'June')breakcase 7:return (result = 'July')breakcase 8:return (result = 'August')breakcase 9:return (result = 'September')breakcase 10:return (result = 'October')breakcase 11:return (result = 'November')breakcase 12:return (result = 'December')break}return result},},onShow() {this.list = [];this.getdate();},onLoad(option) {// this.getwidth();// yuansu 监听某个div 到达顶部},// mounted(){//  window.addEventListener('scroll',this.handleScrollx,true)// },// // 需要在页面销毁时，移除监听事件，避免了内存泄漏// beforeDestroy() {// 		window.removeEventListener("scroll",this.handleScrollx);// },methods: {// handleScrollx() {// 	// console.log(this.list.length)//   console.log('滚动高度',window.pageYOffset);//  },// 获取当前  年与月份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;// 获取每月是多少天var day = new Date(year, month, 0).getDate();console.log(month + '月有' + day + '天');// 本月for (var i = 0; i < day; i++) {this.list.push({choose: false, // 是否选中hour: 0, // 总共多长时间name: i + 1, // 日month: month, // 月nian: year, // 年riqi: year + '-' + month + '-' + (Number(i + 1) < 10 ? '0' + Number(i + 1) : Number(i +1)) // 日期 2023-11-18});}// 获取每月1号是 周几let one = month + '/1' + '/' + year; //   10/1/2023// var weekArr = ['星期天','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var weekArr = ['0', '1', '2', '3', '4', '5', '6'];var week = weekArr[new Date(one).getDay()];console.log(month + '月1号是周' + 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;this.nian = year;this.yue = month;uni.showLoading({title:'Loading'});this.getlist();setTimeout(function() {that.jiaFun();}, 300);},jiaFun() {// 月份加1var date2 = new Date(this.nianyueri);date2.setMonth(date2.getMonth() + 1);this.xianianyueri = this.DateToString(date2, 'yyyy-MM-dd')// console.log(this.xianianyueri ,'下一个月');var today1 = new Date(this.xianianyueri);var year1 = today1.getFullYear();var month1 = today1.getMonth() + 1;var jinday1 = today1.getDate();// 获取下一个月每月是几天var day1 = new Date(year1, month1, 0).getDate();console.log(this.xianianyueri + '有多少天' + day1)for (var i = 0; i < day1; i++) {this.list.push({choose: false, // 是否选中hour: 0, // 总共多长时间name: i + 1, // 日month: month1, // 月nian: year1, // 年riqi: year1 + '-' + month1 + '-' + (Number(i + 1) < 10 ? '0' + Number(i + 1) : Number(i +1)) // 日期 2023-11-18});}console.log(this.list, '所有')this.yuefen = this.xianianyueri;this.getlist();},// 月份 加1 DateToString(date, fmt) {var o = {'Q+': Math.floor((date.getMonth() + 3) / 3), // 季度'M+': date.getMonth() + 1, // 月份'd+': date.getDate(), // 日'h+': (date.getHours() % 24 == 0) ? '00' : date.getHours() % 24, // 小时'H+': date.getHours(), // 小时'm+': date.getMinutes(), // 分's+': date.getSeconds(), // 秒'f+': date.getMilliseconds() // 毫秒};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() {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;}});});});}},//监听页面滚动onPageScroll(res) {let that = this;let a = 0a = 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;}});}},// 触底加载onReachBottom() {console.log('触底加载', this.yue, this.nian);console.log('现在的月份', 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();// 获取下一个月每月是几天var day1 = new Date(year1, month1, 0).getDate();console.log(this.yuefen + '有多少天' + day1)for (var i = 0; i < day1; i++) {this.list.push({choose: false, // 是否选中hour: 0, // 总共多长时间name: i + 1, // 日month: month1, // 月nian: year1, // 年riqi: year1 + '-' + month1 + '-' + (Number(i + 1) < 10 ? '0' + Number(i + 1) : Number(i +1)) // 日期 2023-11-18});}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>```

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/188810.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Panda3d 场景管理

Panda3d 场景管理

Panda3d 场景管理 文章目录 Panda3d 场景管理有关分层场景图的重要信息NodePathNodePath 以及 Node 的函数调用模型文件文件格式加载模型文件将模型放置在场景图中模型缓存压缩模型异步加载模型通过回调函数进行 常见的状态变化修改节点的位置和姿态改变父级节点改变颜色隐藏和…
阅读更多...
如何帮助 3D CAD 设计师实现远程办公

如何帮助 3D CAD 设计师实现远程办公

当 3D CAD 设计师需要远程办公时&#xff0c;他们可能需要更强的远程软件&#xff0c;以满足他们的专业需求。比如高清画质&#xff0c;以及支持设备重定向、多显示器支持等功能。3D CAD 设计师如何实现远程办公&#xff1f;接下来我们跟随 Platinum Tank Group 的故事来了解一…
阅读更多...
JS实现数据结构与算法

JS实现数据结构与算法

队列 1、普通队列 利用数组push和shif 就可以简单实现 2、利用链表的方式实现队列 class MyQueue {constructor(){this.head nullthis.tail nullthis.length 0}add(value){let node {value}if(this.length 0){this.head nodethis.tail node}else{this.tail.next no…
阅读更多...
drawio连接线的样式设置

drawio连接线的样式设置

drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能&#xff0c;并实现了云端存储&#xff0c;以及在线共…
阅读更多...
DDoS攻击剧增，深入解析抗DDoS防护方案

DDoS攻击剧增，深入解析抗DDoS防护方案

当下DDoS攻击规模不断突破上限&#xff0c;攻击方式越发复杂。面对复杂的攻击形式&#xff0c;对于企业和组织来说无疑需要更完备的抗DDoS方案&#xff0c;依靠传统的解决方法并不能做到一劳永逸。在服务器抵抗DDoS防护上&#xff0c;你不会忽略F5的产品&#xff0c;让我们一起…
阅读更多...
【LLM_03】自然语言处理基础_1

【LLM_03】自然语言处理基础_1

一、自然语言处理基基本任务和应用1、自然语言处理的基本任务2、搜索引擎的基本工作原理3、知识图谱的构建4、应用 二、词表示与语言模型1、词表示2、上下文3、语言模型4、神经网络在语言模型的应用 三、神经网络1、神经网络基本组成元素2、如何训练神经网络3、计算图的概念4、…
阅读更多...
npm 下载包失败解决方案

npm 下载包失败解决方案

1.【问题描述】使用 npm 下载vue项目依赖包时失败&#xff0c;版本不一致。 【解决方法】使用 npm install --force npm install --force 是一个命令行指令&#xff0c;用于在 Node.js 环境中使用 npm&#xff08;Node Package Manager&#xff09;安装包或模块。–force 参数表…
阅读更多...
2023 年最好的 Android 系统修复/刷机应用程序和软件

2023 年最好的 Android 系统修复/刷机应用程序和软件

任何 Android 设备要顺利运行&#xff0c;其操作系统必须运行良好。幸运的是&#xff0c;对于大多数 Android 用户来说&#xff0c;这是不间断的。设备运行良好&#xff0c;打电话、共享文档等都没有问题。尽管如此&#xff0c;Android 操作系统可能会停止运行。这可能是由于特…
阅读更多...
Pinme POS无代码开发集成营销系统，实现广告推广自动化

Pinme POS无代码开发集成营销系统，实现广告推广自动化

无代码开发平台的优势 无代码开发平台如集简云是一款超级软件连接器&#xff0c;无需开发&#xff0c;无需代码知识就可以轻松打通千款软件之间的数据连接&#xff0c;构建自动化与智能化的业务流程。这种方式无需花费数周甚至数个月的时间做软件集成开发&#xff0c;最快20分…
阅读更多...
海康Visionmaster-环境配置：CSharp 二次开发环境配 置方法

海康Visionmaster-环境配置：CSharp 二次开发环境配 置方法

C#二次开发环境的配置方法 以 WinForm 为例&#xff0c;进行 VM 二次开发的环境配置分为三步&#xff1a; 第一步&#xff0c;使用 VS 新建一个框架为.NET Framework 4.6.1 的工程&#xff0c;平台首选 32 位取消勾选&#xff0c;重新生成解决方案&#xff0c;保证工程 Debug 下…
阅读更多...
openssl研发之base64编解码实例

openssl研发之base64编解码实例

一、base64编码介绍 Base64编码是一种将二进制数据转换成ASCII字符的编码方式。它主要用于在文本协议中传输二进制数据&#xff0c;例如电子邮件的附件、XML文档、JSON数据等。 Base64编码的特点如下&#xff1a; 字符集&#xff1a; Base64编码使用64个字符来表示二进制数据…
阅读更多...
DevOps平台两种实现模式

DevOps平台两种实现模式

我们需要一个DevOps平台 要讨论DevOps平台的实现模式&#xff0c;似乎就必须讨论它们的概念定义。然而&#xff0c;当大家要讨论它们的定义时&#xff0c;就像在讨论薛定谔的猫。 A公司认为它不过是自动化执行Shell脚本的平台&#xff0c;有些人认为它是一场运动&#xff0c;另…
阅读更多...
韦东山老师的从0写RTOS笔记

韦东山老师的从0写RTOS笔记

生产bin文件 fromelf --bin --outputled.bin Objects\led_c.axf 生产汇编文件 fromelf --text -a -c --outputled.dis Objects\led_c.axf 1.AAPCS函数调用规则 R0-R3&#xff1a;传递参数R0&#xff1a;传递返回值SP&#xff08;R13&#xff09;&#xff1a;栈指针LR&#xff…
阅读更多...
用excel计算矩阵的乘积

用excel计算矩阵的乘积

例如&#xff0c;我们要计算两个矩阵的乘积&#xff0c; 第一个矩阵是2*2的&#xff1a; 1234 第2个矩阵是2*3的&#xff1a; 5697810 在excel中鼠标点到其它空白的地方&#xff0c;用来存放矩阵相乘的结果&#xff1a; 选择插入-》函数&#xff1a; 选中MMULT&#xff0c;…
阅读更多...
Spring Cache

Spring Cache

目录 1、简介 2、常用注解 3、使用RedisTemplate 4、使用springCache &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初步涉猎Python人…
阅读更多...
MeterSphere 任意文件读取漏洞（CVE-2023-25814）

MeterSphere 任意文件读取漏洞（CVE-2023-25814）

MeterSphere 任意文件读取漏洞&#xff08;CVE-2023-25814&#xff09; 免责声明漏洞描述漏洞影响漏洞危害网络测绘Fofa: title"MeterSphere" 漏洞复现1. 构造poc2. 发送数据包3. 查看文件 免责声明 仅用于技术交流,目的是向相关安全人员展示漏洞利用方式,以便更好地…
阅读更多...
【LeetCode】挑战100天 Day10（热题+面试经典150题）

【LeetCode】挑战100天 Day10（热题+面试经典150题）

【LeetCode】挑战100天 Day10&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-122.1 题目2.2 题解 三、面试经典 150 题-123.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…
阅读更多...
kubeadm部署k8s及高可用

kubeadm部署k8s及高可用

目录 CNI 网络组件 1、flannel的功能 2、flannel的三种模式 3、flannel的UDP模式工作原理 4、flannel的VXLAN模式工作原理 5、Calico主要组成部分 6、calico的IPIP模式工作原理 7、calico的BGP模式工作原理 8、flannel 和 calico 的区别 Kubeadm部署k8s及高可用 1、…
阅读更多...
Python读取csv文件并绘制曲线

Python读取csv文件并绘制曲线

前言 有时候我们的数据保存在csv文件中&#xff0c;但是想要更加直观的看出数据的好坏&#xff0c;最好利用matplotlib来画出曲线图 数据准备 我的数据格式如下&#xff1a; 在画图时&#xff0c;我需要把第一行去掉 # 去除第一个元素 xdata xdata.drop(xdata.index[0])…
阅读更多...
Longhorn跨AZ实现存储高可用

Longhorn跨AZ实现存储高可用

Longhorn跨AZ实现存储高可用 longhorn基础组件功能及其作用这里就不做介绍了 方案一 Longhorn跨AZ的高可用的就是一个PVC的replicas 均匀打散的不同的AZ区域之间&#xff0c;这样当某个AZ挂掉后&#xff0c;engine会立即使用另外一个数据副本&#xff0c;并重建这个副本&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023