微信小程序picker详细介绍

　　微信小程序picker详细介绍如下，今天小编来为各位微信小程序开发者介绍微信小程序开发的picker，各位亲们，如果想要了解什么是微信小程序picker的话，就跟着小编一起来往下面看看吧!

　　微信小程序picker详细介绍：

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

　　1、认的自己可以定义小程序数据的

　　2、ode="time"是时间选择器

　　3、ode="date"是日期选择器

　　跟其他的一样，下面先来看下picker.wxml微信小程序代码：

　　当前选择: {{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

　　})

　　}

　　})

　　下面是小程序页面展示：

　　三种样式图：

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

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

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

　　以上就是微信小程序picker的详细介绍了哦，感谢各位亲们的观看，大家看完以上的微信小程序picker详细介绍以后，对于微信小程序picker都了解了吗?希望以上内容对大家有用，请多多关注微小乔。

相关阅读：

微信小程序怎么播放本地音乐?

微信小程序录音授权关键代码

微信小程序下拉框开发代码