当前位置: 首页 > 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…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

初探Service服务发现机制

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

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...