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

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

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,一经查实,立即删除!

相关文章

第一个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;北交所个股…

前端发送请求格式

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…

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

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

Tcp_Sever(线程池版本的 TCP 服务器)

Tcp_Sever&#xff08;线程池版本的 TCP 服务器&#xff09; 前言1. 功能介绍及展示1.1 服务端连接1.2 客户端连接&#xff08;可多个用户同时在线连接服务端&#xff09;1.3 功能服务1.3.1 defaultService&#xff08;默认服务&#xff09;1.3.2 transform&#xff08;大小写转…

【Qt】qss 设置通过 addAction 添加的 QToolButton的图标

文章目录 1. 使用 QSS 和状态示例代码2. 使用 QSS 动态更改图标QSS 示例总结 在 Qt 中&#xff0c;QSS 不能直接用于为 QAction 设置图标&#xff0c;因为 QSS 主要用于样式和外观的设置&#xff0c;而不是用于数据&#xff08;如图标&#xff09;的设置。 不过&#xff0c;你…

HTB:Antique[WriteUP]

目录 连接至HTB服务器并启动靶机 1.After running an nmap scan on TCP ports we identify port 23 open. If we run another scan on UDP ports, which port do we find open? 2.What service is running on the UDP port that we identified in the previous question? …

Next.js14快速上手

文章目录 ***客户端***什么是Next项目在线地址官方文档项目创建查看项目目录结构app属于根目录 ***服务端***vercel数据库prisma 客户端 什么是Next Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React Components 来构建用户界面&#xff0c;并使用 Ne…

java实现日志按天打印

<?xml version"1.0" encoding"UTF-8"?> <configuration><!-- 应用名称&#xff1a;和统一配置中的项目代码保持一致&#xff08;小写&#xff09; --><property name"APP_NAME" value"mita-main"/><!--日…