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


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 第二课 操作包装集元素代码
Mar 14 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
echarts饼图各个板块之间的空隙如何实现
Dec 01 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
第六节--访问属性和方法
2006/11/16 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JS的数组迭代方法
2015/02/05 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Python常用模块用法分析
2014/09/08 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python Paramiko使用示例
2020/09/21 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
内容编辑个人求职信
2013/12/10 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
丽江古城导游词
2015/02/03 职场文书
消防隐患整改通知书
2015/04/22 职场文书
开学典礼观后感
2015/06/15 职场文书
大学生见习总结报告
2015/06/24 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
导游词之西安骊山
2019/12/03 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸