小程序picker标题_微信小程序之picker

下面来介绍小picker，分三种样式：

默认的自己可以定义数据的

mode="time"是时间选择器

mode="date"是日期选择器

跟其他的一样先来看下picker.wxml

picker

选择器

地区选择器

当前选择：{{array[index]}}

时间选择器

当前选择: {{time}}

日期选择器

当前选择: {{date}}

picker.wxss

page {

background-color: #fbf9fe;

height: 100%;

}

.page__hd{

padding: 50rpx 50rpx 100rpx 50rpx;

text-align: center;

}

.page__title{

display: inline-block;

padding: 20rpx 40rpx;

font-size: 32rpx;

color: #AAAAAA;

border-bottom: 1px solid #CCCCCC;

}

.page__desc{

display: none;

margin-top: 20rpx;

font-size: 26rpx;

color: #BBBBBB;

}

.section{

margin-bottom: 80rpx;

}

.section__title{

margin-bottom: 16rpx;

padding-left: 30rpx;

padding-right: 30rpx;

}

.picker{

padding: 26rpx;

background-color: #FFFFFF;

}

picker.js

Page({

data: {

array: ['中国', '美国', '巴西', '日本'],

index: 0,

date: '2016-09-01',

time: '12:01'

},

bindPickerChange: function(e) {

console.log('picker发送选择改变，携带值为', e.detail.value)

this.setData({

index: e.detail.value

})

},

bindDateChange: function(e) {

this.setData({

date: e.detail.value

})

},

bindTimeChange: function(e) {

this.setData({

time: e.detail.value

})

}

})

demo地址

下面是页面展示

展示.png

三种样式图：

1. 默认的自己可以定义数据的

1.png

2. mode="time"是时间选择器

2.png

3. mode="date"是日期选择器

3.png