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


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 相关文章推荐
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript每日必学之封装
Feb 23 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
推荐一个基于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
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python中元组的用法整理
2020/06/15 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
打架检讨书100字
2014/01/19 职场文书
网络教育自我鉴定
2014/02/04 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
情人节寄语大全
2014/04/11 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
追悼词范文大全
2015/06/23 职场文书
小学运动会通讯稿
2015/07/18 职场文书
商业计划书格式、范文
2019/03/21 职场文书
感谢信的技巧及范例
2019/05/15 职场文书