当前位置: 首页 > news >正文

微信小程序 选择年和月以及回显 使用picker-view组件

<!--选择年月--><view bindtap="pickCalendar">{{year}}年{{month}}月</view><picker-view wx:if="{{open}}" class="fixed-select" indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{[year, month-1]}}" bindchange="bindChange"><view class="select-head"><view class="close" bindtap="closeSelect">取消</view><view class="close sure" bindtap="sureSelect">确定</view></view><picker-view-column><view wx:for="{{years}}" wx:key="this" class="picker-list">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" wx:key="this" class="picker-list">{{item}}月</view></picker-view-column>    </picker-view>
/*选择年月-start*/
const date = new Date()
const years = []
const months = []
for (let i = 1900; i <= date.getFullYear(); i++) {years.push(i)
}
for (let i = 1; i <= 12; i++) {months.push(i)
}
/*选择年月-end*/
Page({data: {/*选择日期-start*/years,months,year: date.getFullYear(), //年份month: date.getMonth() + 1, //几月value: [9999, 0, 0], // 获取年月份open: false,checkedYear: '',//选中的年份 最后赋值用checkedMonth: '',//选中的月份 最后赋值用/*选择日期-end*/},/*其它代码*//*月份选择器-start*/  pickCalendar(){console.log(this.data.month)this.setData({open: true})},//确定选择sureSelect(){this.setData({// val 上面定义了 接收的是e里面的值 为数组 year: this.data.checkedYear || this.data.year,month: this.data.checkedMonth || this.data.month,open: false}) },// 取消选择 closeSelect() {this.setData({open: false})},// 日期改变bindChange(e) {const val = e.detail.valuethis.setData({// val 上面定义了 接收的是e里面的值 为数组 checkedYear: this.data.years[val[0]],checkedMonth: this.data.months[val[1]],})    },/*月份选择器-end*/
})  
/*选择月份-start*/
.fixed-select {position: fixed;bottom: 0;left: 0;z-index: 10;height: 350rpx;background-color: #fff;    border-top: 2px solid #e9e9ea;
}.fixed-select .select-head {position: absolute;top: 0;z-index: 111;  display: flex;  justify-content: space-between;width: 100%;line-height: 60rpx;background-color: #eee;
}.fixed-select .select-head .close {padding: 10rpx 20rpx;
}.fixed-select .select-head .sure {color: #ffb81c;
}
.picker-list{line-height: 50px; text-align: center;}
/*选择月份-end*/

自己记录用的 可以作为参考

相关文章:

微信小程序 选择年和月以及回显 使用picker-view组件

<!--选择年月--><view bindtap"pickCalendar">{{year}}年{{month}}月</view><picker-view wx:if"{{open}}" class"fixed-select" indicator-style"height: 50px;" style"width: 100%; height: 300px;"…...

助力工业物联网,工业大数据之ST层的设计【二十五】

文章目录 04&#xff1a;ST层的设计05&#xff1a;服务域&#xff1a;工单主题分析06&#xff1a;服务域&#xff1a;工单主题实现 04&#xff1a;ST层的设计 目标&#xff1a;掌握ST层的设计 路径 step1&#xff1a;功能step2&#xff1a;来源step3&#xff1a;需求 实施 功…...

MySQL实践——参数SQL_SLAVE_SKIP_COUNTER的奥秘

每次数据库复制冲突之后&#xff0c;经常使用的一个命令如下。 SET GLOBAL SQL_SLAVE_SKIP_COUNTER 1;一般会认为&#xff0c;现在出现冲突错误&#xff0c;那就将上面参数值设置为1&#xff0c;跳过出错的这个event就可以解决了。重新启动复制&#xff0c;发现问题果然解决&…...

小程序面试题

文章目录 简单谈谈微信小程序小程序的原生组件有哪些小程序的安卓版和ios版是怎么开发出来uni-app弹窗被覆盖怎么解决小程序生命周期小程序路由跳转小程序的兼容问题有哪些小程序框架都掌握哪一些,uniapp都会哪一些,平时开发遇到的困难上传图片uni-app h5 端的ios图片不能加载…...

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码&#xff08;Captcha&#xff09;&#xff0c;基于十道安全防护策略&#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时&#xff0c;提供更精细化的用户体验。 …...

Docker build 命令详解

build 命令用于使用 Dockerfile 创建镜像。 语法&#xff1a; $ docker build [OPTIONS] PATH | URL | -OPTIONS 说明 # 可通过帮助命令查看 $ docker build --help--build-arg[]: 设置镜像创建时的变量--cpu-shares: 设置 cpu 使用权重--cpu-period: 限制 CPU、CFS 周期--cpu…...

基于Translators的多语言翻译解决方案

当Translators库,一个用Python为个人和学生提供免费、多样、愉快翻译的库。 文章目录 Translators支持的翻译服务安装与入门参数和功能支持的语言调试和运行环境API服务Translators Translators库是一个强大的Python库,旨在为个人和学生提供免费、多样、愉快的翻译体验。它支…...

Unity 性能优化五:渲染模块压力

CPU压力 Batching 在GPU渲染前&#xff0c;CPU会把数据按batch发送给GPU&#xff0c;每发送一次&#xff0c;都是一个drawcall&#xff0c;GPU在渲染每个batch的时候&#xff0c;会切换渲染状态&#xff0c;这里的渲染状态指的是&#xff1a;影响对象在屏幕上的外观的渲染属性…...

Redis数据库 | 事务、持久化

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Redis事务操作 Redis事务是一组命令的集合&#xff0c;这些命令会作为一个整体被执行&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败&#xff1b;Redis事…...

浅析大数据时代下的视频技术发展趋势以及AI加持下视频场景应用

视频技术的发展可以追溯到19世纪初期的早期实验。到20世纪初期&#xff0c;电视技术的发明和普及促进了视频技术的进一步发展。 1&#xff09;数字化&#xff1a;数字化技术的发明和发展使得视频技术更加先进。数字电视信号具有更高的清晰度和更大的带宽&#xff0c;可以更快地…...

TensorRT学习笔记--基于YoloV8检测图片和视频

1--完整项目 完整项目地址&#xff1a;https://github.com/liujf69/TensorRT-Demo git clone https://github.com/liujf69/TensorRT-Demo.gitcd TRT_YoloV8 2--模型转换 cd yolov8python gen_wts.py 3--编译项目 mkdir buildcd build cmake .. # 需要更改 CMakeLists.txt…...

【C++】开源:matplotlib-cpp静态图表库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍matplotlib-cpp图表库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…...

香港IT软件开发服务公司Alpha Technology 申请纳斯达克IPO上市

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于中国香港的IT软件开发服务公司Alpha Technology 近期已向美国证券交易委员会&#xff08;SEC&#xff09;提交招股书&#xff0c;申请在纳斯达克IPO上市&#xff0c;股票代码为&#xff0…...

JavaScript:数组深拷贝

文章目录 1 数组深拷贝的意义2 数组深拷贝的常用方式2.1 使用 JSON 序列化和反序列化2.2 使用递归方法2.3 使用第三方库 1 数组深拷贝的意义 JavaScript中的数组深拷贝&#xff0c;指的是创建一个完全独立于原始数组的新数组&#xff0c;所有新数组的元素都是原始数组的副本。…...

干翻Dubbo系列第七篇:@EnableDubbo、@DubboService、@DubboReference注解的作用

文章目录 文章说明 一&#xff1a;EnableDubbo注解的作用 1&#xff1a;注解使用地点 2&#xff1a;注解作用 3&#xff1a;路径要求 4&#xff1a;指定路径 5&#xff1a;另外一种指定路径 二&#xff1a;DubboService注解的作用 1&#xff1a;注解作用 2&#xff1…...

clickhouse断电重启故障解决方案

业务场景 公司的一个日志系统用到了clickhouse。一线运维反映说有个生产环境因为异常断电造成服务器重启。在执行日志系统的启动脚本时&#xff0c;一直报clickhouse启动不起来&#xff0c;日志系统无法使用。 问题排查 通过阅读启动脚本代码&#xff0c;以及启动日志系统&a…...

Spring学习笔记之Bean的实例化方式

文章目录 通过构造方法实例化通过简单工厂模式实例化通过factory-bean实例化BeanFactory和FactoryBean的区别BeanFactoryFactoryBean 注入自定义Date Spring为Bean提供了多种实例化方式&#xff0c;通常包括4种方式。&#xff08;也就是说在Spring中为Bean对象的创建准备了很多…...

JVM-类加载器

1.前置知识 1.1CPU与内存交互图&#xff1a; 2.类加载器ClassLoader 在装载(Load)阶段&#xff0c;其中第(1)步:通过类的全限定名获取其定义的二进制字节流&#xff0c;需要借助类装 载器完成&#xff0c;顾名思义&#xff0c;就是用来装载Class文件的。 2.1什么是类加载器&a…...

ChatGPT在法律行业的市场潜力

​ChatGPT现在已经成为我们的文字生成辅助工具、搜索引擎助手&#xff0c;许多体验过它的朋友会发现对它越来越依赖&#xff0c;并将其逐渐融入到自己的日常工作、生活。但有一点值得注意&#xff1a;这种人工智能除了技术可行、经济价值可行还要与相关规范即人类普遍的价值观念…...

Python编程从入门到实践练习第三章:列表简介

目录 一、字符串1.1 在字符串中使用变量 二、列表2.1 遍历列表练习题代码 2.2 列表元素的插入和删除涉及方法练习题代码 2.3 组织列表涉及方法练习题代码 2.4 索引 参考书&#xff1a;Python从入门到实践&#xff08;第二版&#xff09; 一、字符串 1.1 在字符串中使用变量 f…...

Raspberry Pi Imager:树莓派系统安装的终极解决方案

Raspberry Pi Imager&#xff1a;树莓派系统安装的终极解决方案 【免费下载链接】rpi-imager The home of Raspberry Pi Imager, a user-friendly tool for creating bootable media for Raspberry Pi devices. 项目地址: https://gitcode.com/gh_mirrors/rp/rpi-imager …...

我的上课记

...

Python开发者实战:用pg-mcp轻松搞定PostgreSQL集群读写分离与连接池管理

Python开发者实战&#xff1a;用pg-mcp轻松搞定PostgreSQL集群读写分离与连接池管理 现代Web应用对数据库的要求越来越高&#xff0c;特别是在高并发场景下&#xff0c;传统的单一数据库连接方式往往成为性能瓶颈。作为Python开发者&#xff0c;我们经常需要在Flask或Django项目…...

如何高效解决Windows驱动存储臃肿问题?DriverStore Explorer带来75-90%的空间释放效率提升

如何高效解决Windows驱动存储臃肿问题&#xff1f;DriverStore Explorer带来75-90%的空间释放效率提升 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer Windows系统随着使用时间增…...

学习---3

有序数组的排序&#xff1a;一、暴力解法&#xff1a;思路&#xff1a;遍历数组&#xff0c;对每个数组元素进行平方&#xff0c;再用sort排序。时间复杂度&#xff1a;O(nlog n)二、双指针解法&#xff1a;思路&#xff1a;如果有序数组中有负数&#xff0c;那么这个负数平方之…...

GLM-4v-9b效果展示:学术海报截图→研究方法/结果/结论三段式结构化提取

GLM-4v-9b效果展示&#xff1a;学术海报截图→研究方法/结果/结论三段式结构化提取 1. 模型能力概览 GLM-4v-9b是智谱AI在2024年推出的开源多模态模型&#xff0c;拥有90亿参数&#xff0c;专门处理文本和图像的联合理解任务。这个模型最大的特点是能够同时看懂图片和文字&am…...

单片机:从核心原理到智能应用实战

1. 单片机&#xff1a;智能时代的微型大脑 想象一下清晨醒来&#xff0c;窗帘自动拉开&#xff0c;咖啡机开始工作&#xff0c;室内温度始终保持在最舒适的状态——这些看似简单的智能场景背后&#xff0c;都藏着一个不起眼却至关重要的核心部件&#xff1a;单片机。这块比硬币…...

别等电脑挂了后悔,教你现在就查看Bitlocker密钥

网管小贾 / sysadm.cc陈主任晃了晃脑袋&#xff0c;皱着眉冲着刘晓白说道&#xff1a;“简历我看过了&#xff0c;就算请我吃饭&#xff0c;恐怕也很难办啊&#xff01;” 刘晓白则一呲牙&#xff1a;“我说老舅&#xff0c;要进你们公司&#xff0c;还不是您一句话的事儿嘛&am…...

Vivado MIG IP核实战:DDR3控制器配置与仿真全流程解析

1. Vivado MIG IP核与DDR3控制器基础认知 第一次接触DDR3控制器时&#xff0c;我被那些密密麻麻的时序图吓得不轻。直到发现Xilinx的MIG&#xff08;Memory Interface Generator&#xff09;IP核&#xff0c;才明白原来FPGA开发可以这么"偷懒"。这个IP核就像个贴心的…...

GLM-OCR服务监控与运维指南:使用Prometheus与Grafana搭建看板

GLM-OCR服务监控与运维指南&#xff1a;使用Prometheus与Grafana搭建看板 想象一下&#xff0c;你负责的GLM-OCR服务正在线上稳定运行&#xff0c;突然接到业务方反馈&#xff0c;说图片识别接口响应变慢了。你第一反应是什么&#xff1f;是登录服务器看日志&#xff0c;还是去…...