《微信小程序开发从入门到实战》学习二十一

3.3 开发创建投票页面

3.3.9 使用picker选择器组件

使用picker选择器组件增加一个设置截止时间的功能。picker是一个从底部弹出的滚动选择器组件。picker通用属性如下:

mode                选择器类型(selector、multiSelector、time、date、region)

disabled            是否禁用

bindcancel        取消选择时触发的事件处理函数

不同的选择器组件会有一些额外的属性。

当mode为selector时,额外属性如下:

range                可选内容,当mode为selector或multiselector时,range有效

range-key        当range为Object Array时,通过range-key来指定Obejct中key值作为选择器显示内容

value                表示选择了range中的第几个

bindchange       value改变时触发的事件处理函数

当mode为time时,额外属性如下:

value                选择的时间,格式为hh:mm

start                  有效时间范围的开始,格式为hh:mm

end                   有效时间范围的结束,格式为hh:mm

bindchange       value改变时触发的事件处理函数

当mode为date时,额外属性如下:

value                选择的日期,格式为YYYY-MM-DD

start                  有效日期范围的开始,格式为YYYY-MM-DD

end                   有效日期范围的结束,格式为YYYY-MM-DD

fields                 选择器的粒度,有效值year、month、day

bindchange       value改变时触发的事件处理函数

当mode为regin时,额外属性如下:

value                选中的省市区,默认选中每一列的第一个值

custom-item     可为每一列的顶部添加一个自定义的项

bindchange       value改变时触发的事件处理函数,event参数中还可以拿到区域的邮政编码和统计用区划代码

使用picker选择器组件的日期为投票增加一个设置截止时间的功能。

首先在wxml文件的“添加选项”按钮的下方增加如下代码:

    <view class="form-item">

      <text class="form-item-label">截止日期</text>

      <picker class="form-item-picker" mode="date" value="{{endDate}}" start="{{nowDate}}" bindchange="onChangeEndDate">{{endDate}}</picker>

    </view>

接下来在JS文件增加需要的逻辑层数据nowDate、endDate,代码如下:

  data: {

    formTitle: '',

    formDesc: '',

    optionList: [],

    nowDate: '',

    endDate: ''

  }

这两个变量需要动态生成,最好在页面显示前生成,因此在生命周期函数onLoad函数去生成,代码如下:

  onLoad(options) {

    const now = new Date() 

    const nowYear = now.getFullYear() 

    const nowMonth = now.getMonth() + 1 //月份特殊,0~11表示1~12月,因此+1

    const nowDay = now.getDate()

    const nowDate = nowYear + 

    '-' + 

    ((nowMonth < 10)?('0' + nowMonth):nowMonth) + //月份如果是单个数字,前面补0

    '-' + 

    ((nowDay < 10)?('0' + nowDay):nowDay)

    //修改data对象中的nowDate和endDate数据

    this.setData({

      nowDate, // 等价于 nowDate:nowDate,由于 key与 value相同,可以简写

      endDate: nowDate

    })

  },

为picker选择器组件增加一个value改变的事件处理函数,代码如下:

  onChangeEndDate(e){

    this.setData({

      endDate: e.detail.value

    })

  },

在wxss文件中为新加入的组件增加样式。代码如下:

.form-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1rpx solid #eee;

  padding: 20rpx 0;

}

.form-item-label {

  font-size: 12pt;

  color:#333;

}

.form-item-picker {

  font-size: 12pt;

  color:#999;

}

预览效果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

USB转CAN的使用说明

前言 USB转CAN是将 TTL 信号转换为 CAN 信号的模块。采用串口作为嵌入式系统的接口&#xff0c;数据传输简单&#xff0c;无需要学习 CAN 协议&#xff0c;缩短开发周期&#xff0c;降低开发成本。模块兼容 3.3V、5V 电源&#xff0c;搭载一个 32 位的 STM32 处理芯片和一个 C…

buildadmin+tp8表格操作(7.1)表格的事件监听(el-table中的事件)

因为buildAdmin是封装的 el-table的组件&#xff0c;所以el-table中的事件&#xff0c; 也是可以使用的&#xff0c; 两者有几个事件是有共同的&#xff08;比如 双击事件&#xff09;&#xff0c; 这时可以根据自己的需要自行选择 以下代码是 buildadmin 使用 el-table中的事…

键盘映射笔记

dumpkeys命令用于显示当前系统中定义的键盘映射表。它可以帮助用户查看和理解系统中的键盘布局和键盘映射规则。 当用户执行dumpkeys命令时&#xff0c;它会读取系统中的键盘映射表文件&#xff08;通常是/etc/keymaps或/etc/console/boottime.kmap.gz&#xff09;&#xff0c;…

麒麟KYLINOS2303系统上禁用新功能介绍页面

原文链接&#xff1a;麒麟KYLINOS2303系统上禁用新功能介绍页面 hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇在麒麟KYLINOS2303系统上禁用新功能介绍页面的文章&#xff0c;在我们安装完系统登录后&#xff0c;会发现有新功能介绍这个界面&#xff0c;我们可以通…

buildadmin+tp8表格操作(8) 表格下方添加 合计行

表格的下方可以自定义添加一个合计行&#xff0c;如果有其它的需求&#xff0c; 我们可以添加我们自已需要的行&#xff0c; 并不局限于合计行 以上就可以给表格的最下方添加一个合计行了 完整代码如下 <template><div class"default-main ba-table-box"&…

Blender烘焙AO操作及对应的python代码

&#xff08;一&#xff09;Blender软件操作 1. 导入模型&#xff08;这里省略&#xff09; 2. 材质设置 模型使用的所有材质都需要删除Surface Shader&#xff0c;没有其他多余的计算&#xff0c;可以大量缩短烘焙时间。删除之后的只留下一个材质输出节点&#xff0c;如图所…

Vatee万腾携手Wiki EXPO 2023悉尼峰会 共谱辉煌未来

悉尼&#xff0c;这座充满活力和创新的城市&#xff0c;即将成为全球商业的焦点。2023年11月16日&#xff0c;由WikiEXPO主办的Wiki Finance Expo Sydney 2023在悉尼马丁广场1号富丽敦酒店隆重开幕&#xff0c;这场金融博览会是澳大利亚今年规模最宏大、备受期待的金融科技盛会…

网上被吹爆的Spring Event事件订阅有缺陷,不要用

Spring Event事件订阅框架&#xff0c;被网上一些人快吹上天了&#xff0c;然而我们在新项目中引入后发现&#xff0c;这个框架缺陷很多&#xff0c;玩玩可以&#xff0c;千万不要再公司项目中使用。还不如自己手写一个监听者设计模式&#xff0c;那样更稳定、可靠。 之前我已…

电磁场与电磁波part5--均匀平面波在无界空间的传播

目录 1、相位速度 2、波阻抗 3、理想介质中均匀平面波的传播特点 4、色散现象 5、导电媒质中均匀平面波的传播特点 6、趋肤效应 7、电磁波的极化 1、相位速度 电磁波的等相位面在空间中的移动速度&#xff08;相速&#xff09; 在自由空间&#xff08;自由空间的光速&a…

UE5 - ArchvizExplorer - 数字孪生城市模板 - 功能修改

数字孪生项目&#xff0c;大多是双屏互动&#xff0c;而非下方菜单点击&#xff0c;所以要做一番改造 参考&#xff1a;https://blog.csdn.net/qq_17523181/article/details/133853099 1. 去掉提示框 打开BP_MasterMenu_Widget&#xff0c;进入EventGraph&#xff0c;断开Open…

仅需1分钟,搭建一个你自己的工具站

{alert type"info"} 站长工具在工作中应该会有很多人使用&#xff0c;比如说 JSON格式化&#xff0c;UUID生成器&#xff0c;密码生成、URL编码等 今天给大家分享一个英文版的IT-TOOL的搭建教程。 是个开源的项目&#xff0c;地址&#xff1a;https://github.com/Cor…

JZM-D30室温探针台技术参数

概况&#xff1a; JZM-D30室温探针台的诸多设计都是专用的&#xff0c;探针台的配置主要是根据用户的需求进行选配及设计。例如&#xff0c;要求的磁场型号&#xff0c;电源型号&#xff0c;磁场值&#xff0c;样品台的尺寸等&#xff0c;除此之外&#xff0c;该探针台和我司自…

el-tree结合el-switch实现状态切换

<template><div><el-col :span"24"><el-card class"tree-card"><div class"sketch_content selectFile"><span class"span_title">组织列表 </span><div style"display: flex; jus…

【文末送书】计算机网络 | IO多路转接技术 | poll/epoll详解

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

DAY59 503.下一个更大元素II + 42. 接雨水

503.下一个更大元素II 题目要求&#xff1a; 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&#xff09;&#xff0c;输出每个元素的下一个更大元素。数字 x 的下一个更大的元素是按数组遍历顺序&#xff0c;这个数字之后的第一个比它更大的数&am…

DDD落地:从美团抽奖平台,看DDD在大厂如何落地?

尼恩说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 谈谈你的DDD落地经验&#xff1f; 谈谈你对DDD的理解&#xff…

【深入Scrapy实战】从登录到数据解析构建完整爬虫流程

文章目录 1. 写在前面2. 抓包分析3. Scrapy提交登陆请求4. 列表与详情页面数据解析5. 中间件Middleware配置 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xf…

迈巴赫S480升级镀铬中网 480秒变680

迈巴赫S480的首选项目&#xff0c;就是前杠格栅升级了&#xff0c;只需要替换前杠下方的三个格栅中网&#xff0c;就可以直接升级成迈巴赫S680的外形&#xff0c;立马提升了两个档次。

SAP ABAP给指定用户增加SAP ALL权限

下面的例子是给指定用户增加SAP ALL的权限ABAP代码&#xff0c;增加指定权限对像的没研究&#xff0c;只能自己看了。这应该是SAP权限的无限破解了吧。 例子中SAP*,是当前系统中有SAP_ALL权限的一个用户&#xff0c;用来参考使用的&#xff0c;根据实际系统用的最大权限用户&a…

Sqlserver 多行合并为一行

多行合并为一行 表结构 子表结构如下&#xff1a; 父表结构如下&#xff1a; 由图可以看出子表和父表是通过父表ID进行关联的。 我们要实现的效果如下&#xff0c;查询父表数据的同时&#xff0c;增加一列来展示父表下子商品信息。 完整代码如下 select top {0} * from (…