微信小程序 选择年和月以及回显 使用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*/

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

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

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

相关文章

6.物联网操作系统信号量

一。信号量的概念与应用 信号量定义 FreeRTOS信号量介绍 FreeRTOS信号量工作原理 1.信号量的定义 多任务环境下使用&#xff0c;用来协调多个任务正确合理使用临界资源。 2.FreeRTOS信号量介绍 Semaphore包括Binary&#xff0c;Count&#xff0c;Mutex&#xff1b; Mutex包…

【2种方法,jmeter用一个正则提取器提取多个值!】

jmeter中&#xff0c;用json提取器&#xff0c;一次提取多个值&#xff0c;这个很多人都会。但是&#xff0c;用正则提取器一次提取多个&#xff0c;是否可以呢&#xff1f; 肯定&#xff0c;很多人都自信满满的说&#xff0c;可以&#xff01;形如&#xff1a;token":&q…

neo4j清空数据库

清空所有Person、 Movie节奈及其所有关系 MATCH (a:Person), (m:Movie) OPTIONAL MATCH (a)-[r1]-(), (m)-[r2]-() DELETE a,r1,m,r2 查询任意数据 MATCH (n) RETURN n 如果没有&#xff0c; 就说明已经删除成功了 这段代码是用Cypher查询语言编写的&#xff0c;用于清空…

协议组合逻辑学习笔记

1.challenge 面临的挑战是 通过组合各部分的独立证明 来建立 复合协议的安全性证明。但组合是一个困难的问题&#xff0c;因为一个组件 泄露的信息并不会影响其自身的安全性&#xff0c;但会降低其他组件的安全性&#xff01; 因为即使 各个部分的独立证明可能已经确保了它们…

JS 原型与继承

本文内容学习于&#xff1a;后盾人 (houdunren.com) 一、原型对象 每个对象都有一个原型prototype对象&#xff0c;通过函数创建的对象也将拥有这个原型对象。 原型是一个指向对象的指针。 1.可以将原型理解为对象的父亲&#xff0c;对象从原型对象继承来属性 2.原型就是对象…

Jenkins触发器时间、次数设定

触发器触发条件介绍 触发器触发条件公式&#xff1a;由5颗星组成 * * * * * 分别代表&#xff1a;分钟(0-59) 小时(0-23) 日期(1-31) 月份(1-12) 星期(0-6) 企业项目中常用场景介绍 场景1&#xff1a;接口脚本部分测试通过&#xff0c;部分还在进行&#xff0c;回归测试脚本执行…

Windows上安装 jdk 环境并配置环境变量 (超详细教程)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

torchvision.datasets数据加载失败

torchvision.datasets数据加载失败 如何使用torchvision.datasets进行自动下载数据失败&#xff0c;可以使用手动下载数据 Ctrl点击可以进入相关包文件&#xff0c;查找下载地址&#xff1a;https://www.cs.toronto.edu/~kriz/cifar-10-python.tar.gz 手动下载之后解压&#x…

企业微信小程序在调用wx.qy.login时返回错误信息qy.login:fail

原因是大概是绑定了多个企业但是在开发者工具中没有选择正确的企业 解决方法&#xff1a; 重新选择企业后即可成功获取code

指针常量与常量指针的区别、含指针的函数、什么是结构体

const int *p &a;//定义常量指针&#xff0c;值不可改 int * const p &a;//定义指针常量&#xff0c;指向的值可改&#xff0c;指向不可改 const为静态常量的意思&#xff0c;不可修改。从左到右&#xff0c;常量const先出现&#xff0c;指针符号*后出…

在CSDN学Golang场景化解决方案(基于grpc的微服务开发脚手架)

一&#xff0c;服务与服务之间采用TLS加密通信 在Golang基于gRPC的微服务开发中&#xff0c;可以采用TLS加密通信来确保服务与服务之间的安全通信。下面是一个简单的设计示例&#xff1a; 生成证书和密钥&#xff1a; $ openssl req -newkey rsa:2048 -nodes -keyout server…

Redis 持久化RDB和AOF

Redis 持久化之RDB和AOF Redis 有两种持久化方案&#xff0c;RDB &#xff08;Redis DataBase&#xff09;和 AOF &#xff08;Append Only File&#xff09;。如果你想快速了解和使用RDB和AOF&#xff0c;可以直接跳到文章底部看总结。本章节通过配置文件&#xff0c;触发快照…

RabbitMQ(一) - 基本结构、SpringBoot整合RabbitMQ、工作队列、发布订阅、直接、主题交换机模式

RabbitMQ结构 Publisher &#xff1a; 生产者 Queue: 存储消息的容器队列&#xff1b; Consumer:消费者 Connection&#xff1a;消费者与消息服务的TCP连接 Channel:信道&#xff0c;是TCP里面的虚拟连接。例如&#xff1a;电缆相当于TCP&#xff0c;信道是一条独立光纤束&…

web开发中的安全和防御入门——csp (content-security-policy内容安全策略)

偶然碰到iframe跨域加载被拒绝的问题&#xff0c;原因是父页面默认不允许加载跨域的子页面&#xff0c;也就是的content-security-policy中没有设置允许跨域加载。 简单地说&#xff0c;content-security-policy能限制页面允许和不允许加载的所有资源&#xff0c;常见的包括&a…

Java超级玛丽小游戏制作过程讲解 第三天 创建并完成常量类02

public class StaticValue {//背景public static BufferedImage bgnull;public static BufferedImage bg2null;//马里奥向左跳跃public static BufferedImage jump_Lnull;//马里奥向右跳跃public static BufferedImage jump_Rnull;//马里奥向左站立public static BufferedImage…

原型链污染

文章目录 1. javascript 原型链2. 原型链变量的搜索3. prototype 原型链污染4. 原型链污染例题4.1 题1&#xff1a;4.2.题2&#xff1a; 1. javascript 原型链 js在ECS6之前没有类的概念&#xff0c;之前的类都是用funtion来声明的。如下 可以看到b在实例化为test对象以后&…

LeetCode笔记:Weekly Contest 357

LeetCode笔记&#xff1a;Weekly Contest 357 1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 比赛链接&#xff1a;https://leetcode.com/contest/weekly-contest-357 1. 题目一 给出题目一的试题链接如下…

【C语言进阶】指针的高级应用(下)

文章目录 一、指针数组与数组指针1.1 指针数组与数组指针的表达式 二、函数指针2.1 函数指针的书写方式 三、二重指针与一重指针3.1 二重指针的本质3.2 二重指针的用法3.3 二重指针与数组指针 总结 一、指针数组与数组指针 (1)指针数组的实质是一个数组&#xff0c;这个数组中存…

Linux进程(二)

文章目录 进程&#xff08;二&#xff09;Linux的进程状态R &#xff08;running&#xff09;运行态S &#xff08;sleeping&#xff09;阻塞状态D &#xff08;disk sleep&#xff09;深度睡眠T&#xff08;stopped&#xff09;状态X&#xff08;dead&#xff09;状态Z&#x…

【力扣】21. 合并两个有序链表

以下为力扣官方题解&#xff0c;及本人代码 21. 合并两个有序链表 题目题意示例 1示例 2示例 3提示 官方题解迭代思路算法复杂度 本人代码Java提交结果&#xff1a;通过 题目 题意 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成…