微信小程序的日期区间选择组件的封装和使用

组件化开发是一种将大型软件系统分解为更小、更易于管理和复用的独立模块或组件的方法。这种方法在现代软件开发中越来越受到重视,尤其是在前端开发领域。微信小程序的日期区间选择组件的使用
在这里插入图片描述

wxml 代码

<view><view bind:tap="chooseData">{{ rendunTime || '请选择开始时间和结束时间'}}</view><sx-data-picker show="{{isShowData}}" bind:confirm="getDataSlot"></sx-data-picker>
</view>

js 代码

Page({data: {isShowData:false,rendunTime:""},chooseData(){this.setData({isShowData:!this.isShowData})},getDataSlot(e){let time = `${e.detail.start}${e.detail.end}`this.setData({rendunTime:time})}
})

微信小程序的日期区间选择组件的封装

wxml布局代码

<!-- 遮罩层的样式 -->
<view class="page" bindtouchmove="touchMove" hidden="{{!hideModal}}" wx:if="{{show}}"><!-- 内容视图样式 --><view class="content" style="transform:translateY({{translateY}}px);" animation="{{animate}}"><view class="header" bindtouchstart="touchStart"><image class="headerFork" bindtap="hideModal" src="/static/images/close.png"></image><view class="time" ><view class="time_text"><view>开始时间:{{startyear}}年{{startmonth}}月{{startday}}日</view></view><view class="item_time"><picker-view indicator-class="picker_active" mask-class="mask" value="{{startvalue}}" data-type="start" style="width: 100%; height: 200rpx;" bindchange="bindChange"><picker-view-column><view class="timeText" wx:for="{{years}}" wx:key="index">{{item}}年</view></picker-view-column><picker-view-column><view class="timeText" wx:for="{{months}}" wx:key="index" bindchange="monthChange">{{item}}月</view></picker-view-column><picker-view-column><view class="timeText" wx:for="{{days}}" wx:key="index">{{item}}日</view></picker-view-column></picker-view></view><view class="time_text"><view>结束时间:{{endyear}}年{{endmonth}}月{{endday}}日</view></view><view class="item_time"><picker-view indicator-class="picker_active" mask-class="mask" style="width: 100%; height: 200rpx;" value="{{endvalue}}" data-type="end" bindchange="bindChange"><picker-view-column><view class="timeText" wx:for="{{years}}" wx:key="index">{{item}}年</view></picker-view-column><picker-view-column><view class="timeText" wx:for="{{months}}" wx:key="index">{{item}}月</view></picker-view-column><picker-view-column><view class="timeText" wx:for="{{days}}" wx:key="index">{{item}}日</view></picker-view-column></picker-view></view></view></view><!-- 按钮 --><view class="button" bindtap="confirm"><view class="view">确认</view></view></view>
</view>

wxss样式代码

.page {position: fixed;top: 0;left: 0;z-index: 1000;width: 100vw;height: 100vh;background: rgba(0, 0, 0, 0.5);display: flex;flex-direction: column;justify-content: flex-end;
}.content {width: 100vw;background: rgba(255, 255, 255, 1);border-radius: 16rpx 16rpx 0rpx 0rpx;
}.header {width: 100vw;padding: 24rpx 50rpx;box-sizing: border-box;
}.header .headerFork {position: absolute;top: 26rpx;left: calc(100% - 60rpx);width: 36rpx;height: 36rpx;opacity: 0.3;border-radius: 50%;
}.headerContent {width: 198rpx;height: 198rpx;border-radius: 8rpx;
}.headerContent .headerContentImage {width: 100%;height: 100%;border-radius: 8rpx;
}.header .money {font-size: 48rpx;font-family: Medium;font-weight: 500;color: #FA5151;margin-left: 24rpx;
}.smallMoney {font-size: 30rpx;
}.header>.headerNumber>.name {height: 30rpx;font-size: 30rpx;font-family: Medium;font-weight: 500;color: #181818;line-height: 30rpx;
}.button {width: 100vw;padding: 32rpx 24rpx;border-top: 2rpx solid #f5f5f5;position: relative;z-index: 100;
}.button .view {width: calc(100% - 48rpx);height: 80rpx;border-radius: 50rpx;line-height: 80rpx;text-align: center;font-size: 30rpx;font-family: Regular;font-weight: 400;color: #fff;background: #409eff;opacity: 1;
}
.timeText{font-size: 28rpx;line-height: 68rpx;font-family: Medium;font-weight: 500;color: #181818;text-align: center;
}
.time_text {text-align: center;margin-top: 32rpx;margin-bottom: 14rpx;font-size: 30rpx;font-family: Medium;font-weight: 500;color: #181818;
}

js 逻辑代码

 
let pageY = 0
const date = new Date()
const years = []
const months = []
const days = []
// 获取当前日期的年月日
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth() + 1;
var currentDate = new Date().getDate();
// 当前月份包含的天数
var maxDate = new Date(currentYear, currentMonth, 0).getDate();
// 所有的年份
for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)
}
// 所有的月份
for (let i = 1; i <= 12; i++) {months.push((i + "").padStart(2, '0'))
}
// 当前月份包含的所有天数
for (let i = 1; i <= maxDate; i++) {days.push((i + "").padStart(2, '0'))
}Component({options: {styleIsolation: 'isolated', //样式隔离},/*** 组件的属性列表*/properties: {show: {type: Boolean,value: false},},/*** 数据监听*/observers: {'show': function (value) {if (value) {this.showModal()} else {this.hideModal()}}},/*** 组件的初始数据*/data: {// 时间控件years: years,months: months,days: days,// 开始日期文字startyear: '',startmonth: '',startday: '',// 时间控件开始时间startvalue: [],// 结束日期文字endyear: '',endmonth: '',endday: '',// 时间控件结束时间endvalue: [],animate: '',hideModal: false, //模态框的状态  false-隐藏  true-显示},/*** 组件的方法列表*/methods: {// 显示遮罩层showModal() {this.setData({hideModal: true, //点击之后是否显示})const animation = wx.createAnimation({duration: 500, //反应的时间timingFunction: 'ease', //动画效果})// 先显示背景再执行动画,translateY(0)偏移量为0代表显示默认高度setTimeout(() => {animation.translateY(0).step()this.setData({animate: animation.export()})this.timeShow()}, 0)},// 隐藏遮罩层hideModal() {const animation = wx.createAnimation({duration: 500,timingFunction: 'ease',})// 设置为100vh可以确保滚动到底部,可以按照自己的内容高度设置,能够滑到底部即可animation.translateY('100vh').step()this.setData({animate: animation.export(),})// 先执行动画,再隐藏组件setTimeout(() => {this.setData({hideModal: false})this.triggerEvent('hideModal', true)}, 300)},// 移动touchMove(e) {const clientY = e.changedTouches[0].clientYif (clientY - pageY > 0 && clientY - pageY > 50) {this.hideModal()}},// 触摸开始touchStart(e) {pageY = e.changedTouches[0].clientY},// 时间更改bindChange(e) {const val = e.detail.value;var newDays = [];var maxDate = new Date(this.data.years[val[0]], this.data.months[val[1]], 0).getDate();// 选择月份包含的所有天数for (let i = 1; i <= maxDate; i++) {newDays.push((i + "").padStart(2, '0'))}// 时间文字内容更改if (e.target.dataset.type == 'start') { //开始时间//判断月份是否发生改变---月份改变 对应的当月包含天数改变并且定位到1号if (this.data.startmonth != this.data.months[val[1]]) {this.setData({days: newDays,startvalue: [val[0], val[1], 0],startyear: this.data.years[val[0]],startmonth: this.data.months[val[1]],startday: days[0]})} else {this.setData({startyear: this.data.years[val[0]],startmonth: this.data.months[val[1]],startday: this.data.days[val[2]]})}} else { //结束时间//判断月份是否发生改变---月份改变 对应的当月包含天数改变并且定位到1号console.log(days[0])if (this.data.endmonth != this.data.months[val[1]]) {this.setData({days: newDays,endvalue: [val[0], val[1], 0],endyear: this.data.years[val[0]],endmonth: this.data.months[val[1]],endday: days[0]})} else {this.setData({days: newDays,endyear: this.data.years[val[0]],endmonth: this.data.months[val[1]],endday: this.data.days[val[2]]})}}},timeShow() {// 获取时间控件---默认的开始时间和结束时间var defaultYear = years.length - 1;var defaultMonth = currentMonth;var defaultDate = currentDate - 1;this.setData({// 开始日期文字startyear: currentYear,startmonth: currentMonth,startday: currentDate,// 时间控件开始时间startvalue: [defaultYear, defaultMonth, defaultDate],// 结束日期文字endyear: currentYear,endmonth: currentMonth,endday: currentDate,// 时间控件结束时间endvalue: [defaultYear, defaultMonth, defaultDate],})},// 确认按钮事件confirm() {let {startyear,startmonth,startday,endyear,endmonth,endday} = this.datalet obj = {start: startyear + '-' + startmonth + '-' + startday, //开始时间end: endyear + '-' + endmonth + '-' + endday //结束时间}this.hideModal()this.triggerEvent('confirm', obj)},},
})

如果这篇文章对你有所帮助,欢迎点赞、分享和留言,让更多的人受益。感谢你的细心阅读,如果你发现了任何错误或需要补充的地方,请随时告诉我,我会尽快处理。

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

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

相关文章

深度剖析:电商 API 接口如何成就卓越用户体验

在电商领域的激烈竞争中&#xff0c;提供卓越的用户体验已成为企业脱颖而出的关键。而电商 API 接口在其中扮演着举足轻重的角色&#xff0c;它如同电商平台的神经系统&#xff0c;连接着各个关键环节&#xff0c;为用户带来无缝、高效且个性化的购物之旅。 一、极速响应&#…

融合ASPICE与敏捷开发:探索汽车软件开发的最佳实践

ASPICE&#xff08;Automotive SPICE&#xff0c;即汽车软件过程改进和能力dEtermination&#xff09;与敏捷开发在软件开发领域各自具有独特的价值和特点&#xff0c;它们之间的关系可以归纳为既相互区别又相互补充。 一、ASPICE的特点 ASPICE是汽车行业对软件开发流程的一个评…

第一个Qt程序

创建项目 进入ui界面拖一个按钮 在头文件中添加函数说明 #ifndef HELLO_H #define HELLO_H#include <QMainWindow>QT_BEGIN_NAMESPACE namespace Ui { class Hello; } QT_END_NAMESPACEclass Hello : public QMainWindow {Q_OBJECTpublic:Hello(QWidget *parent nullpt…

上海亚商投顾:沪指缩量调整 NMN概念股逆势大涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 市场全天震荡调整&#xff0c;三大指数午后一度跌超1%&#xff0c;北证50指数则涨超4%&#xff0c;北交所个股…

探寻电商 API 接口提升用户体验之道

在当今数字化时代&#xff0c;电商平台已成为人们购物的主要渠道之一。而电商 API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;接口则是连接电商平台与各种应用和服务的桥梁&#xff0c;对于提升用户体验起着至关重要的作用。 一、…

当遇到 502 错误(Bad Gateway)怎么办

很多安装雷池社区版的时候&#xff0c;配置完成&#xff0c;访问的时候可能会遇到当前问题&#xff0c;如何解决呢&#xff1f; 客户端&#xff0c;浏览器排查 1.刷新页面和清除缓存 首先尝试刷新页面&#xff0c;因为有时候 502 错误可能是由于网络临时波动导致服务器无法连…

前端发送请求格式

1.multipart/form-data格式发送请求参数 什么时候用&#xff1a; 当后端API要求以表单的形式接收数据时&#xff0c;比如<input type"text" name"username">和<input type"password" name"password">&#xff0c;这些数据…

html全局属性、框架标签

常用的全局属性&#xff1a; 属性名含义id 给标签指定唯一标识&#xff0c;注意&#xff1a;id是不能重复的。 作用&#xff1a;可以让label标签与表单控件相关联&#xff1b;也可以与css、JavaScript配合使用。 注意&#xff1a;不能再以下HTML元素中使用&#xff1a;<hea…

自动化部署-01-jenkins安装

文章目录 前言一、下载安装二、启动三、问题3.1 jdk版本问题3.2 端口冲突3.3 系统字体配置问题 四、再次启动五、配置jenkins5.1 解锁5.2 安装插件5.3 创建管理员用户5.4 实例配置5.5 开始使用5.6 完成 总结 前言 spingcloud微服务等每次部署到服务器上&#xff0c;都需要本地…

鸿蒙到底是不是纯血?到底能不能走向世界?

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 2016年5月鸿蒙系统开始立项。 2018年美国开始经济战争&#xff0c;其中一项就是制裁华为&#xff0c;不让华为用安卓。 2019年8月9日华为正式发布鸿蒙系统。问题就出在这里&#xff0c;大家可以仔细看。 安卓一…

从零开始学五笔(三):横区字根

从 1 区开始讲解字根&#xff1a; 先介绍按键的区位号、口诀内容、口诀说明然后列每个字根能组成什么汉字&#xff0c;难拆字将用中括号标出 ‍ G 键 区位号&#xff1a;11 口诀&#xff1a;王旁青头戋&#xff08;兼&#xff09;五一 说明&#xff1a; 王旁&#xff1a…

VUE, element-plus, table分页表格列增加下拉筛选多选框,请求后台

简介 为了方便表格查询时可以筛选列的值&#xff0c;需要给列增加筛选框&#xff08;多选框&#xff09;&#xff0c;element-plus提供了列的filter字段&#xff0c;但是基于表格数据的筛选&#xff0c;不会重新请求后台&#xff0c;而且当前表格数据有多少个条目&#xff0c;…

荣耀MagicOS 9.0发布会及开发者大会丨一图读懂应用服务及商业合作分论坛

更多优质流量变现服务&#xff0c;可点击荣耀广告变现服务查看&#xff1b; 荣耀远航计划——应用市场【耀闪行动】全新上线&#xff0c;更多激励及资源扶持可点击荣耀应用市场耀闪行动查看。

香港大学联合上海AI LAB,提出首个人机交互一体化大模型

导读&#xff1a; 具身智能为人与机器人的交互带来了更多便利&#xff0c;利用大语言模型&#xff08;LLMs&#xff09;的推理能力&#xff0c;能够将人类的语言指令逐步转换为机器人可以理解的指令信号。 然而&#xff0c;由于缺乏环境信息作为机器人理解环境和人类指令的上…

FPGA开发verilog语法基础1

文章目录 主体内容1.1 逻辑值1.2 数字进制格式1.3 数据类型1.3.1 寄存器类型1.3.2 线网类型1.3.3 参数类型1.3.4 存储器类型 参考资料 主体内容 1.1 逻辑值 1&#xff0c;逻辑0&#xff0c;表示低电平 2&#xff0c;逻辑1&#xff0c;表示高电平 3&#xff0c;逻辑X&#xff0…

网站安全问题都有哪些,分别详细说明

网站安全问题涉及多个方面&#xff0c;以下是一些常见的网站安全问题及其详细说明&#xff1a; 数据泄露 问题描述&#xff1a;数据泄露是指网站存储的用户敏感信息&#xff08;如用户名、密码、信用卡信息等&#xff09;被非法获取。黑客可能通过SQL注入、XSS攻击等手段窃取这…

学习分布式系统我来助你!【基本知识、基础理论、设计模式、应用场景、工程应用、缓存等全包含!】

基本知识 什么是分布式 分布式系统是一种通过网络连接多个独立计算机节点&#xff0c;共同协作完成任务的系统架构&#xff0c;具有高度的可扩展性、容错性和并发处理能力&#xff0c;广泛应用于大数据处理、云计算、分布式数据库等领域。 通俗来讲&#xff1a;分布式系统就…

git入门操作(2)

文章目录 git入门操作&#xff08;2&#xff09;git diff 查看差异git diff gitignore忽略文件1.在代码仓库创建这个文件2.添加对 log 文件过滤 连接远程仓库与ssh配置远程仓库和本地仓库关联步骤分支基本操作步骤命令&#xff1a; 合并冲突分支合并逻辑1.新建分支 dev&#xf…

网络安全威胁模型浅谈

威胁建模&#xff08;Threat Modeling&#xff09;是一种系统化识别和评估潜在安全威胁的方法&#xff0c;帮助设计和实施有效的安全策略。以下是一些常见的威胁建模方法&#xff1a; 1. **STRIDE**&#xff1a;这是微软开发的一种威胁建模方法&#xff0c;主要关注六种威胁类…

ONLYOFFICE 文档8.2版本已发布:PDF 协作编辑、改进界面、性能优化等更新

ONLYOFFICE 在线编辑器最新版本已经发布&#xff0c;其中包含30多个新功能和500多个错误修复。阅读本文了解所有更新。 关于 ONLYOFFICE 文档 ONLYOFFICE 是一个开源项目&#xff0c;专注于高级和安全的文档处理。坐拥全球超过 1500 万用户&#xff0c;ONLYOFFICE 是在线办公领…