微信小程序实现联动选择器


Posted in Javascript onFebruary 15, 2019

本文实例为大家分享了微信小程序实现联动选择器的具体代码,供大家参考,具体内容如下

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>

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

源码点击下载:wechat-applet-basics

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 #Javascript
微信小程序实现左右列表联动
May 19 #Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 #Javascript
微信小程序实现单选选项卡切换效果
Jun 19 #Javascript
一秒学会微信小程序制作table表格
Feb 14 #Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 #Javascript
微信小程序实现简易table表格
Jun 19 #Javascript
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python 录制系统声音的示例
2020/12/21 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
股东合作协议书范本
2014/04/14 职场文书
护校行动方案
2014/05/31 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
房产公证书样本
2015/01/23 职场文书
技术员岗位职责
2015/02/04 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书