微信小程序------联动选择器

2023-11-01

picker

从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

先来看看效果图:

     

1:普通选择器 mode = selector(默认的)

  <view class='picker'>普通选择器</view>
    <!--
        value: value值表示选择了让的第几个,index===下标  从0开始
        rang:对应数据
        bindchang:value改变时触发的事件
     -->
    <picker bindchange='bindPickerChang' value='{{index}}' range='{{array}}'>
        <view class='picker_one'>
            当前的选择:{{array[index]}}
        </view>
    </picker>

2:时间选择器:mode = time

 <view class='picker tow'>时间选择器</view>
    <!-- 
      value:表示选择时间,格式:hh:mm
      start: 有效时间范围内表示开始 格式:hh:mm 
      end:有效时间范围内表示结束
      
    -->
    <picker bindchange='bindPickerTime' mode='time' start="00:11" end="23:11" value='{{time}}'>
      <view>
      当前时间:{{time}}
      </view>
    </picker>

3:日期选择器:mode = date

 <view class='picker tow'>日期选择器</view>
      <!-- 
      value:表示选择日期,格式:YYYY-MM_DD
      start: 有效日期范围内表示开始
      end:有效日期范围内表示结束
    -->
    <picker bindchange='bindPickerDate' mode='date' start="1991-01-01" end="2017-12-30" value='{{data}}'>
      <view>
      当前日期:{{data}}
      </view>
    </picker>

4:省市区选择器:mode = region

 <view class='picker tow'>城市选择器</view>
     <!-- 
      value:示选中的省市区,默认选中每一列的第一个值
    -->
    <picker bindchange='bindPickerCity' mode='region' value='{{region}}'>
      <view>
      当前城市:{{region[0]}},{{region[1]}},{{region[2]}}
      </view>
    </picker>

一个简单的小案例,多项选择器,希望对各位有所帮助。

 源码点击下载

转载于:https://my.oschina.net/zhangqie/blog/1529645

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序------联动选择器 的相关文章

随机推荐

  • wsl无法连接到win上的docker

    https docs docker com desktop windows wsl
  • QT 写一个属于自己的消息弹窗MessageBox

    前言 在接触公司的一个桌面应用项目后 发现里面很多窗体都是自己写的而不是使用QT自带的 例如消息弹窗 今天这篇博客就记录下来如何自己写一个消息弹窗 内容可能有点多 但都是本人自己一步一步操作后 测试可行后才记录下博客这里来的 希望对看到这篇
  • kaldi中SHELL调用C++程序过程源码分析

    引入 kaldi真正的核心源码 都是C 写成的 这个结论可以从如下两点得以确认 1 在kaldi的源码kaldi src目录下 能看到很多扩展名为 cc的源程序 这是linux下C 源码 2 在源码中 比如kaldi src featbin
  • 和导师的第二次探讨

    Jason提问 导师 最近读文献的方面我碰到两个问题 一 就是感觉读的太杂了 人工智能方向太大 文章五花八门 二 内容刚接触感觉晦涩难懂 特别是英文文献 而且用翻译软件意思有时候翻译成中文就感觉也不对 我应该如何解决呢 导师回答 对于问题一
  • sourceInsight官网介绍及插入定制语言支持

    sourceInsight官网介绍及插入定制语言支持 版本说明 版本 作者 日期 备注 0 1 ZY 2019 6 4 初稿 目录 文章目录 sourceInsight官网介绍及插入定制语言支持 版本说明 目录 一 sourceinsigh
  • 已经有了ERP,为什么还要上MES?

    当前 制造企业面临着巨大的竞争和成本压力 利润越来越少 交货时间要求越来越短 人力成本越来越高 产品越来越复杂 大多数企业已经在使用ERP系统了 他们会想 我已经上了ERP了 为什么还需要MES系统 许多工厂车间只有很有限的IT系统 比如自
  • Vector简介说明

    转自 Vector简介说明 下文笔者讲述Vector简介说明 如下所示 Vector简介 Vector集合和ArrayList集合功能相似 底层都是通过数组来实现集合的 Vector和ArrayList最大的区别是Vector的很多方法都是
  • 开发Android硬件访问服务

    在http blog csdn net getnextwindow article details 47731597中 为Android系统添加了HAL模块 开发好一个硬件抽象层以后 我们通常还需要在应用程序框架中实现一个硬件访问服务 硬件
  • 数据结构实验--带环、相交链表问题

    一 问题描述 基于课程上机关于单链表的作业 要求进一步实现以下需求 1 构造链表后 将元素值为 m 和 n 从键盘输入 如有多个相同元素值 仅考虑首个出现的元素 的节点建立连接 注意判断节点出现的先后关系 将后面出现的节点 假设为 n 的链
  • 【数据结构】栈和队列

    栈和队列 一 栈 1 栈的简单介绍 2 栈的相关函数接口实现 1 初始化 2 销毁 3 压栈 4 弹栈 5 判空 6 取栈顶元素 7 栈的大小 二 队列 1 队列的简单介绍 2 队列的相关函数接口实现 1 初始化 2 销毁 3 插入 4 删
  • 台湾海峡隧道工程线路初定3个方案(图)

    台湾海峡隧道工程线路初定3个方案 图 http www sina com cn 2007年04月22日01 50 新京报 3方案示意图 本报讯 昨日 第一届海峡两岸通道 桥隧 工程学术研讨会新闻发布会在福州举行 与会专家称 台湾海峡隧道工程
  • PLC驱动伺服电机、步进电机共阳极接法-20230701

    由于工作需要 需要测试一台小型伺服电机是否好坏 记录一下接线方法 设备如下 信捷XDM 60T10 C PLC 安诺机器人 57AIM30一体化伺服电机 官网找了下技术手册 可以看到这是一款24V供电的小型伺服驱动器 供电可以用手头的这款P
  • 高通平台(8917/8937/8953...) secure boot 软件配置

    以下以8917平台为例 其他平台类似 找到对应配置文件即可 1 新建临时目录 mkdir tmp cd tmp 2 复制openssl文件到临时目录 cp LA UM LINUX android vendor qcom proprietar
  • Pytorch(GPU)详细安装教程

    如果你也是为了安装Pytorch的话 然后在安装CUDA时出现上述错误时 那么就有必要往下看了 我电脑小白 自己摸索安装 一点一点搜索 然后在我不断努力下终于安装成功 最近也是在学习深度学习 把自己安装软件过程中遇到的问题很大家分享一下 在
  • Apollo CyberRT编译问题‘Socket closed‘

    Apollo 编译问题 Socket closed apollo CyberRT编译错误 错误原因 解决方法 apollo CyberRT编译错误 Server terminated abruptly error code 14 error
  • Oracle函数 获得一个UUID

    通过Oracle函数返回一个UUID create or replace function F GET UUID p length in INT return varchar2 is Result varchar2 200 说明 返回一个指
  • GitHub入门教程

    一 注册GitHub账号 GitHub官网https github com 注册之后 登录注册的邮箱验证后注册完成 二 下载Git 有Mac Windows Linux版本的 下载地址 https git scm com downloads
  • js 提示crypto is not defined

    在使用python 调用js的时候 Crypto enc UTF8 parse 引用这个函数的时候提示这个模块没有 没定义 随即 npm install crypto 但是又报错 cryptois not found 换了一些源也没用 最后
  • r语言聚类分析_R语言ggtree画圆形的树状图展示聚类分析的结果

    今天的主要内容是实现下面这幅图 做完聚类分析通常可以选择 树形图来展示聚类分析的结果 之前公众号也分享过一篇文章 如果样本数不是很多 可以选择矩形的树状图 但是样本数如果比较多 比如今天一位公众号的读者留言说他有160多个样本 这样 矩形的
  • 微信小程序------联动选择器

    2019独角兽企业重金招聘Python工程师标准 gt gt gt picker 从底部弹起的滚动选择器 现支持五种选择器 通过mode来区分 分别是普通选择器 多列选择器 时间选择器 日期选择器 省市区选择器 默认是普通选择器 先来看看效