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


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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
Python多项式回归的实现方法
2019/03/11 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python 随机按键模拟2小时
2020/12/30 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
自荐信格式的六要素
2013/09/21 职场文书
职业教育毕业生求职信
2013/11/09 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
申报优秀教师材料
2014/12/16 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers