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

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

7.3 表单组件

7.3.1 picke-view与picker-view-column组件

一个picker-view-column代表 一个滚动选择器子项,一个picker-view组件可以包含多个picker-view-column组件,这样可以一次性选择多项内容如年、月、日等。

picker-view-column组件中需包含多个子元素,这些子元素是滚动选择器子项的选项列表。

picker-view组件支持的属性如下所示:

属性类型说明最低版本
valuenumber[]数组中的数组依次表示为picker-view内的picker-view-column选项的第几项(下标从0开始)。数字大于picker-view-column可选性长度时,选择最后一项1.0.0
indicator-stylestring设置选择器中间选中项的样式1.0.0
indicator-classstring设置选择器中间选中项的类名1.1.0
mask-stylestring设置蒙层的样式1.5.0
mask-classstring设置蒙层的类名1.5.0
bindchangeeventhandle滚动选择时触发change事件,event.detail={value};value为数组,表示picker-view内的picker-view-column当前选择的第几项(下标从0开始 )1.0.0
bindpickstarteventhandle当滚动选择开始时触发事件2.3.1
bindpickendeventhandle当滚动选择结束时触发事件2.3.1

日期选择的示例代码如下,三个picker-view-column代表年、月、日的选择子项:

<!--WXML-->

<view>

  <view style="text-align:center;">{{year}}年{{month}}月{{day}}日</view>

  <picker-view indicator-style="height:50px" style="width: 100%;height: 300px;" value="{{value}}" bindchange="bindChange">

    <picker-view-column>

      <view wx:for="{{years}}" style="line-height: 50px;">{{item}}年</view>

    </picker-view-column>

    <picker-view-column>

      <view wx:for="{{months}}" style="line-height: 50px;">{{item}}月</view>

    </picker-view-column>

    <picker-view-column>

      <view wx:for="{{days}}" style="line-height: 50px;">{{item}}日</view>

    </picker-view-column>

  </picker-view>

</view>


// JS

const date = new Date()

const years = []

const months = []

const days = []

for (let i = 1990; i < date.getFullYear(); i++) {

  years.push(i)

}

for (let i = 1; i <= 12; i++) {

  months.push(i)

}

for (let i = 1; i <= 31; i++) {

  days.push(i)

}

Page({

  /**

   * 页面的初始数据

   */

  data: {

    years: years,

    year: date.getFullYear(),

    months: months,

    month: 2,

    days: days,

    day: 2,

    value: [9999,1,1]

  },

  bindChange: function(e){

    const val = e.detail.value

    this.setData({

      year: this.data.years[val[0]],

      month: this.data.months[val[1]],

      day: this.data.days[val[2]]

    })

  }

})

相关文章:

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

7.3 表单组件 7.3.1 picke-view与picker-view-column组件 一个picker-view-column代表 一个滚动选择器子项&#xff0c;一个picker-view组件可以包含多个picker-view-column组件&#xff0c;这样可以一次性选择多项内容如年、月、日等。 picker-view-column组件中需包含多个…...

二极管漏电流对单片机ad采样偏差的影响

1&#xff0c;下图是常规的单片机采集电压电路&#xff0c;被测量电压经过电阻分压&#xff0c;给到mcu采集&#xff0c;反向二极管起到钳位作用&#xff0c;避免高压打坏mcu。 2&#xff0c;该电路存在的问题 二极管存在漏电流&#xff0c;会在100k电阻上产生叠加电压&#x…...

三、防御保护---防火墙安全策略篇

三、防御保护---防火墙安全策略篇 一、什么是安全策略二、安全策略的组成1.匹配条件2.动作3.策略标识 三、防火墙的状态检测和会话表1.会话表2.状态检测技术 四、ASPF--隐形通道五、用户认证1.用户认证的分类2.认证方式3.认证策略4.认证域 一、什么是安全策略 传统的包过滤防火…...

【学网攻】 第(15)节 -- 标准ACL访问控制列表

系列文章目录 目录 系列文章目录 文章目录 前言 一、ACL(访问控制列表)是什么? 二、实验 1.引入 实验拓扑图 实验配置 测试PC2能否Ping通PC3 配置ACL访问控制 实验验证 PC1 Ping PC3 总结 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认…...

【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解

【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解 提示:最近开始在【医学图像分割】方面进行研究,记录相关知识点,分享学习中遇到的问题已经解决的方法。 文章目录 【图像分割】【深度学习】Windows10下UNet代码Pytorch实现与源码讲解前言UNet模型运行环境搭…...

MySQL十部曲之一:MySQL概述及手册说明

文章目录 数据库、数据库管理系统以及SQL之间的关系关系型数据库与非关系型数据库MySQL程序系统变量系统状态变量SQL模式MySQL数据目录手册语法约定 数据库、数据库管理系统以及SQL之间的关系 名称说明数据库&#xff08;Database&#xff09;即存储数据的仓库&#xff0c;其本…...

node.js基础--01

Author nodes&#xff1a;&#xff08;题记&#xff09; node.js is an open-source&#xff0c;cross-platform JAVAScript runtime environment。 node.js是一个开源&#xff0c;跨平台的js运行环境 common commands&#xff08;常用指令&#xff09; 1、C: enter hard …...

基于GPT3.5逆向 和 本地Bert-Vits2-2.3 的语音智能助手

文章目录 一、效果演示二、操作步骤三、架构解析 一、效果演示 各位读者你们好&#xff0c;我最近在研究一个语音助手的项目&#xff0c;是基于GPT3.5网页版的逆向和本地BertVits2-2.3 文字转语音&#xff0c;能实现的事情感觉还挺多&#xff0c;目前实现【无需翻墙&#xff0…...

java stream简介

&#xff08;1&#xff09;Stream Stream&#xff08;流&#xff09;是一个来自数据源的元素队列并支持聚合操作。 forEach方法用来迭代流中的每个数据&#xff0c;没有返回值。map方法用于映射每个元素到对应的结果&#xff0c;有返回值&#xff0c;返回的是一个新流&#xf…...

机电制造ERP软件有哪些品牌?哪家的机电制造ERP系统比较好

机电制造过程比较复杂&#xff0c;涵盖零配件、采购、图纸设计、工艺派工、生产计划、物料需求计划、委外加工等诸多环节。而供应链涉及供应商的选择、材料采购价格波动分析、材料交货、品质检验等过程&#xff0c;其中某个环节出现问题都可能会影响产品交期和经营效益。 近些…...

分布式ID(4):雪花算法生成ID之Leaf(美团点评分布式ID生成系统)

1 Leaf官方地址 Leaf源码地址: https://github.com/Meituan-Dianping/Leaf Leaf官方说明文档地址: https://tech.meituan.com/2019/03/07/open-source-project-leaf.htmlhttps://github.com/Meituan-Dianping/Leaf/blob/master/README_CN.md 这边只做简单介绍,详细说明…...

翻译: GPT-4 Vision征服LLM幻觉hallucinations 升级Streamlit六

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三翻译: GPT-4 Vision从图像转换为完全可编辑的表格 升级St…...

TextView的setTextSize与xml中android:textSize属性值的对应关系

android中&#xff0c;对TextView设置文本字体大小&#xff0c;是通过在layout xml中设置android:textSize的属性值实现的&#xff0c;比如设置“24sp”&#xff0c;这里的sp是一种单位&#xff0c;其他可选的单位还有px&#xff0c;dip(dp)&#xff0c;pt&#xff0c;in&#…...

广东盈致mes系统在注塑行业的应用

广东盈致MES系统在注塑行业的应用主要体现在以下几个方面&#xff1a; 生产计划与调度&#xff1a;盈致MES系统能够根据订单需求和生产计划&#xff0c;自动生成生产任务&#xff0c;并跟踪生产进度&#xff0c;确保按时完成生产任务。通过与注塑机的集成&#xff0c;系统可以自…...

如何获得《幻兽帕鲁》隐藏帕鲁唤夜兽?13000个配种配方查询 幻兽帕鲁Steam好评率还在涨 Mac苹果电脑玩幻兽帕鲁 Crossover玩Windows游戏

《幻兽帕鲁》是一款Steam平台热门游戏&#xff0c;开放式大陆和养成式冒险结合&#xff0c;成为2024首款热门游戏&#xff0c;不过由于官方仅发布了Windows版的游戏客户端&#xff0c;Mac用户无法直接玩&#xff0c;好在有Crossover这样的神器&#xff0c;让苹果电脑也能玩上《…...

elementui中的tree自定义图标

需求&#xff1a;实现如下样式的树形列表 自定义树的图标以及点击时&#xff0c;可以根据子级的关闭&#xff0c;切换图标 <el-tree :data"treeList" :props"defaultProps"><template #default"{ node, data }"><span class&quo…...

mybatis实现模糊搜索

这里使用if标签进行是实现&#xff0c;使用like标签也可以实现&#xff0c;只是容易出错了&#xff0c;下面 直接上代码 只需要把字段名和搜索条件替换就行。 <select id"selectByLike" parameterType"map" resultType"YourResultType">…...

ssh 修改端口号 一个ip ssh多个主机

ssh默认端口为22。 通过路由映射&#xff0c;保留一个22端口&#xff0c;其它主机修改端口&#xff0c;可以用一个ip ssh多个主机。 修改端口需修改/etc/ssh/sshd_config sudo vim /etc/ssh/sshd_config/Port #Port 22删除前面的#&#xff0c;然后修改端口号&#xff0c;如23 …...

Proto文件如何生成JavaProto对象?

首先安装好Protocol Buffer的编译器 Protocol Buffer: version:2.6.1 link: 链接直达 根据电脑环境进行下载&#xff0c;Widnwos 32/64位就选择win32是没问题的&#xff0c;楼主亲测 1.proto文件编写 Person.proto public class Person {String name;int id;String email…...

LightDB 24.1 UNION支持null类型匹配

背景介绍 在LightDB 24.1之前的版本&#xff0c;UNION null类型匹配会报错。 lightdbpostgres# select null l_zqlbmx2 union all select null l_zqlbmx2 union all select sysdate l_zqlbmx; ERROR: UNION types text and timestamp without time zone…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...