微信小程序（十八）picker组件详细介绍_Javascript教程-查字典教程网

微信小程序（十八）picker组件详细介绍

摘要：picker选择器分为三种，普通选择器，时间选择器，日期选择器用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG...

微信小程序（十八）picker组件详细介绍1

picker选择器分为三种，普通选择器，时间选择器，日期选择器用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥！没法手机测试现在也不知道咋回事！！

主要属性：

普通选择器

微信小程序（十八）picker组件详细介绍2

时间选择器

微信小程序（十八）picker组件详细介绍3

日期选择器

微信小程序（十八）picker组件详细介绍4

wxml

<view>普通选择器</view> <> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected"> <text>{{array[index]}}</text> </picker> <view>时间选择器</view> <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected"> <text>{{time}}</text> </picker> <view>日期选择器</view> <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected"> <text>{{date}}</text> </picker>

Page({ data:{ // text:"这是一个页面" array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'], index: 0, time: '08:30', date: '2016-09-26' }, /** * 监听普通picker选择器 */ listenerPickerSelected: function(e) { //改变index值，通过setData()方法重绘界面 this.setData({ index: e.detail.value }); }, /** * 监听时间picker选择器 */ listenerTimePickerSelected: function(e) { //调用setData()重新绘制 this.setData({ time: e.detail.value, }); }, /** * 监听日期picker选择器 */ listenerDatePickerSelected:function(e) { this.setDate({ date: e.detail.value }) }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })

hello WeApp icon组件

Window text组件switch组件

tabBar底部导航 progress组件action-sheet

应用生命周期button组件 modal组件

页面生命周期checkbox组件toast组件

模块化详form组件详 loading 组件

数据绑定input 组件 navigator 组件

View组件 picker组件 audio 组件

scroll-view组件 radio组件video组件

swiper组件 slider组件 Image组件

【微信小程序（十八）picker组件详细介绍】相关文章：

★ JavaScript基本语法讲解