微信小程序之picker

这是一款来自小程序免费开发制作网的小程序demo源码，希望大家喜欢。

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

默认的自己可以定义数据的
mode=”time”是时间选择器
mode=”date”是日期选择器

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

<view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <text class="page__desc">选择器</text> </view> <view class="page__bd"> <view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> <view class="section"> <view class="section__title">时间选择器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker> </view> <view class="section"> <view class="section__title">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker> </view> </view> </view>

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地址

https://github.com/miaozhang9/WeAppDemo

下面是页面展示

(此图片来源于网络，如有侵权，请联系删除! )

展示.png

三种样式图：

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

(此图片来源于网络，如有侵权，请联系删除! )

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

(此图片来源于网络，如有侵权，请联系删除! )

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

(此图片来源于网络，如有侵权，请联系删除! )

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

本资源来自易用通，如有侵权，请联系站长。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序之picker