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

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;

}

预览效果如下:

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

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

相关文章

学了Python不做全职,那么可以靠哪些兼职赚到钱?

如果学了Python不做全职工作&#xff0c;那么可以靠哪些兼职赚到钱&#xff1f; 今天我们就来看看一位有着4年开发经验的老鸟的分析回答&#xff0c;希望对你有所帮助。 emmm… 以我差不多四年的 Python 使用经验来看&#xff0c;大概可以按以下这些路子来赚到钱&#xff0c;…

【云原生-Kurbernetes篇】K8s的存储卷/数据卷+PV与PVC

这是一个目录标题 一、Kurbernetes中的存储卷1.1 为什么需要存储卷&#xff1f;1.2 存储卷概述1.2.1 简介1.2.2 volume字段 1.3 常用的存储卷类型1.3.1 emptyDir&#xff08;临时存储卷&#xff09;1.3.2 hostPath&#xff08;节点存储卷&#xff09;1.3.3 nfs1.3.4 cephfs 二、…

横向扩展统一存储备份解决方案的特点与优势

Infortrend 使企业能够实现高效和可靠的数据备份&#xff0c;确保业务不间断的运行&#xff0c;保护有价值的业务信息。用户可以依靠我们的存储解决方案实现恢复时间目标&#xff08;RTO&#xff09;和恢复点目标&#xff08;RPO&#xff09;&#xff0c;用于广泛的备份应用场景…

【Reading Notes】

文章目录 中文AA 或 AAAAAAAAAAA&#xff0c;BBBBAAAA&#xff0c;BBBB&#xff0c;CCCCAAAA&#xff0c;BBBB&#xff0c;CCCC&#xff0c;DDDDAAAAAAAAAA&#xff0c;BBBBBAAAAA&#xff0c;BBBBB&#xff0c;CCCCC&#xff08;肆&#xff09;AAAAA&#xff0c;BBBBB&#xf…

ComText让机器人有了情节记忆

为了让人类与机器人更好地交流&#xff0c;MIT 计算机科学与人工智能实验室的研究员开发了一个名为 ComText 的程序。这款程序给机器人增加了情节记忆&#xff0c;让它们能够接受更加复杂的命令。目前&#xff0c;他们已经在机器人 Baxter 上测试了程序。 机器人没有情景化的记…

ubuntu从源码编译gdal

删除旧版本 sudo apt remove libgdal* sudo apt remove gdal* sudo apt autoremove下载proj和gdal https://github.com/OSGeo/PROJ/releases 这里使用的是9.3.0版本&#xff1a; https://github.com/OSGeo/gdal/releases 这里使用的是3.7.3版本&#xff1a; 编译 安装…

漏洞复现--飞企互联FE业务协作平台ShowImageServlet任意文件读取

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

Git 笔记之gitignore

解释为&#xff1a;git ignore 即&#xff0c;此类型的文件将会被忽略掉&#xff0c;从而不会进行管理 具体的模板可以从 GitHub 网站上来进行设置 GitHub - github/gitignore: A collection of useful .gitignore templates Common_gitignore: gitignoregithub开源项目&…

【Android】画面卡顿优化列表流畅度六(终篇)

上一篇&#xff1a; 【Android】画面卡顿优化列表流畅度五之下拉刷新上拉加载更多组件RefreshLayout修改 场景回顾&#xff1a; 业务经过一年半左右的运行后&#xff0c;出现了明显的列表卡顿情况&#xff1b;于是开始着手进行列表卡顿优化。目前的情况是&#xff1a; 网络图…

2023.11.17 -hivesql调优,数据压缩,数据存储

目录 1.hive命令和参数配置 2.hive数据压缩 3.hive数据存储 0.原文件大小 18.1MB 1.textfile行存储格式, 压缩后size:18MB 2.行存储格式:squencefile ,压缩后大小8.89MB​ 3. 列存储格式 orc - ZILIB ,压缩后大小2.78MB 4.列存储格式 orc-snappy ,压缩后大小3.75MB 5…

修改CentOS默认mail发件人名称

修改CentOS默认mail发件人名称 在CentOS中&#xff0c;可以通过修改邮件发送配置文件来修改默认的邮件发件人名称。以下是一些步骤&#xff0c;您可以根据您的实际情况进行修改&#xff1a; 打开终端或SSH连接到CentOS服务器。使用文本编辑器&#xff08;如vi或nano&#xff0…

Java,集合框架,关于Collection接口(子接口List和Set)

目录 数组储存多个数据方面的特点&#xff1a; Java集合框架体系&#xff1a;&#xff08;Java.util包下&#xff09; Collection接口中的方法测试&#xff1a; 迭代器&#xff08;Iterator&#xff09;的作用&#xff1a;用来遍历集合元素。 增强for循环&#xff08;即for…

监控电脑的软件叫什么丨科普小知识

监控电脑的软件叫电脑监控软件。 电脑监控软件是一种可以监控电脑使用情况的软件&#xff0c;通常具有记录屏幕活动、网站访问、聊天记录等功能。 应用场景 1、企业内部管理&#xff1a;企业管理者可以通过监控电脑软件来监视员工的工作活动&#xff0c;以确保员工遵守公司政…

2311rust,到46版本更新

1.43.0稳定版 项(item)片段 在宏中,可用项片段把项插值到特征,实现和extern块的块体中.如: macro_rules! mac_trait {($i:item) > {trait T { $i }} } mac_trait! {fn foo() {} }这生成: trait T {fn foo() {} }围绕原语的推导类型 改进了围绕原语,引用和二进制操作的推…

测试和验证有什么区别,怎么划分测试集和验证集

测试集和验证集是在机器学习中用于评估模型性能的两个不同的数据集。它们有不同的目的和使用方式。 验证集&#xff08;Validation Set&#xff09;&#xff1a; 目的&#xff1a; 用于调整模型的超参数&#xff08;例如&#xff0c;学习率、正则化参数等&#xff09;和进行模型…

centos7 探测某个tcp端口是否在监听

脚本 nc -vz 192.168.3.128 60001 if [ $? -eq 0 ]; thenecho "tcp succeed" elseecho "tcp failed" fi nc -vz 192.168.3.128 60001 探测192.168.3.128服务器上60001 tcp端口, -vz说明是探测TCP的 端口开启的情况 执行脚本 端口禁用情况 执行脚本

Vue3的7种和Vue2的12种组件通信

Vue3 组件通信方式 props$emitexpose / ref$attrsv-modelprovide / injectVuex Vue3 通信使用写法 props 用 props 传数据给子组件有两种方法&#xff0c;如下 方法一&#xff0c;混合写法 // Parent.vue 传送 <child :msg1"msg1" :msg2"msg2">…

热度很高的小米汽车,有两个关键点决定它明年能不能大卖

监制 | 何玺 排版 | 叶媛 小米汽车再传新消息。 据了解&#xff0c;小米汽车已经拿到了工信部的“准生证”&#xff0c;预计将在明年正式发布。 消息传出后&#xff0c;小米新车立刻成为媒体“曝光”的焦点。这款车外形如何、价格什么档次&#xff1f;最关键的是&#xff0c…

静态共享代理和静态独享有哪些区别?怎么选择?

在软件开发中&#xff0c;静态共享代理&#xff08;Static Proxy&#xff09;和静态独享&#xff08;Monostatic&#xff09;是两种常见的软件设计模式。这两种模式在实现方式、使用场景以及优缺点上存在一定的差异&#xff0c;下面将详细介绍它们的区别以及如何进行选择。 一、…

rabbitmq默认交换机锁绑定的routingkey-待研究

例如这个是我的一个消息队列&#xff0c;它默认绑定的交换机是 什么类型呢? 看到这个图&#xff0c;感觉应该是一个默认的交换机&#xff0c;因为是default exchange 于是来到交换机来看看其他默认的交换机&#xff1a; 这里可以看到默认的交换机是direct&#xff08;应该没…