当前位置:首页 > 编程教程 > javascript技术文章 > 微信小程序picker组件简单用法示例【附demo源码下载】

实例讲解小程序picker组件简单用法【附demo源码下载】

  • 发布时间:
  • 作者:码农之家
  • 点击:129

这篇文章主要知识点是关于picker组件、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript权威指南
  • 类型:JS指南大小:22 MB格式:PDF作者:DavidFlanagan,淘宝前端团队
立即下载

微信小程序picker组件简单用法示例【附demo源码下载】

本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考,具体如下:

picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器。

具体功能说明如下:

普通选择器:mode=selector

 

属性名 类型 默认值 说明
range Array [] mode为selector时,range有效
value Number 0 mode为selector时,是数字,表示选择了range中的第几个,从0开始。
bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

 

时间选择器:mode=time

 

属性名 类型 默认值 说明
value String   表示选中的时间,格式为"hh:mm"
 start String   表示有效时间范围的开始,字符串格式为"hh:mm"
 end String   表示有效时间范围的结束,字符串格式为"hh:mm"
 bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

 

日期选择器:mode=date

 

属性名 类型 默认值 说明
value String 0 表示选中的日期,格式为"yyyy-MM-dd"
start String   表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"
end String   表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"
fields String day 有效值year,month,day,表示选择器的粒度
bindchange EventHandle   value改变时触发change事件,event.detail= { value:value}

 

示例代码如下:

picker.wxml:

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

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
 })
 }
})

简单样式布局picker.wxss:

.section {
 display: flex;
 flex-direction: column;
 padding: 20rpx 0rpx;
 color: #333;
}
.section__title{
 font-size: 40rpx;
 margin: 10rpx 0rpx;
}

运行效果:

微信小程序picker组件简单用法示例【附demo源码下载】

附:demo源码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.207032

微信小程序picker组件关于objectArray数据类型的绑定方法

一、前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想要和html中的下拉选中的通过选中获取vaule中的属性值,其实认真查看微信picker组件详解的都知道其实是可以实现的,只不过微信给的实例是array的实例而object array实例是留给大家去动手的哟,在这里我主要介绍的mode=selector 的objectArray实现。 二、介绍: 普通选择器:mode = selector 属性名 类型 默认值 说明 range Array / Object Array [] mode为 selector 或 multiSelector 时,range 有效 range-key String 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 value Number 0 value 的值表示选择了 range 中的第几个(下标从 0 开始) bindchange EventHandle value 改变时触发 change 事件,event.detail = {value: value} disabled Boolean……

网友NO.181154

微信小程序picker组件下拉框选择input输入框的实例

微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 view class="row-wrap" view class="label"预约项目/view picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}" view text{{casArray[casIndex]}}/text /view /picker /view /viewview class="section {{reply?'on':'off'}}" input name="other" placeholder="请输入所预约项目" type="text"/ /view js data: { nickName: "", avatarUrl: "", casArray: ['双眼皮', 'TBM', '隆胸', '减肥', '手动输入'], userName: '', mobile: '', Gender: 'female', casIndex: 0, }, /** * 生命周期函数--监听页面加载 */ bindCasPickerChange: function (e) { console.log('乔丹选的是', this.data.casArray[e.detail.value]) if (e.detail.value == 4) { this.setData({ reply: true }) } else { this.setData({ reply: false }) } this.setData({ casIndex: e.detail.value }) }, 添加input框的样式 .section{ font-size:28rpx; margin-left: 50rpx; margin-top: 30rpx; } .on{display: block} .off{displ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

idea注册码