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


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从头学起第二讲
Jul 04 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
售后专员岗位职责
2013/12/08 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
高中打架检讨书
2014/02/13 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
家庭贫困证明
2014/09/23 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
预备党员介绍人意见
2015/06/01 职场文书
毕业实习证明范本
2015/06/16 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
八年级语文教学反思
2016/03/03 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android