微信小程序组件解读和分析：十二、picker滚动选择器

picker滚动选择器组件说明:

picker:

滚动选择器，现支持三种选择器，通过mode属性来区分，

分别是普通选择器(mode = selector)，时间选择器(mode = time)，日期选择器(mode = date)，

默认是普通选择器。

picker滚动选择器示例代码运行效果如下：

下面是WXML代码：

[XML] 纯文本查看复制代码

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

下面是JS代码：

[JavaScript] 纯文本查看复制代码

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

})

}

})

下面是WXSS代码：

[CSS] 纯文本查看复制代码

.page {

min-height: 100%;

flex: 1;

background-color: #FBF9FE;

font-size: 32rpx;

font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

overflow: hidden;

}

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

}

.picker{

padding: 26rpx;

background-color: #FFFFFF;

}

.section{

margin-bottom: 80rpx;

}

.section__title{

margin-bottom: 16rpx;

padding-left: 30rpx;

padding-right: 30rpx;

}

picker滚动选择器的主要属性：

普通选择器：(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}

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637480.html

微信小程序组件解读和分析：十二、picker滚动选择器相关推荐

微信小程序组件解读和分析：六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行. progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pr ...
微信小程序开发入门教程（十二）
背景上一篇文章我们讲述了微信小程序的三个基础组件icon.text和progress.这些基础组件主要用途是进行信息展示,微信小程序除了信息展示还需要与用户交互,而表单是应用中获取用户输入的重要手段 ...
微信小程序|开发实战篇之十二---order页面
order页面 1.order页面解构 1.order页面解构
微信小程序和PWA对比分析
微信小程序和PWA对比分析微信小程序和PWA(Progressive Web App)是目前移动端以及前端受关注度较高的两项技术.小程序自去年公测以来,国内很多公司均投入到小程序的开发中,今日头条. ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
微信小程序从入坑到放弃二十九：一个小场景搞懂冒泡事件bindtap和catchtap的区别
摘要: 在微信小程序中,bindtap事件会产生冒泡,若不加以拦截,会一直冒泡到顶端.在某些情况下,一次点击会触发若干点击事件.为了防止冒泡,使用catchtap即可解决问题.在有全屏半透明背景的弹出 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作注:子组件向父组件中传递通过事件传递操作通过事件参数对象det ...
微信小程序font-family中提供的十四种字体
微信小程序font-family中提供的十四种字体链接:https://blog.csdn.net/include_IT_dog/article/details/98382276
微信小程序开发入门教程（十）
背景前几篇文章我们已经学习了WXML相关的数据绑定与几种渲染方式,还学习了与WXSS相关的样式绑定.浮动定位和Flex布局,其中无论是WXML的页面布局还是WXSS的样式都是基于元素而言的,而这些元 ...

微信小程序组件解读和分析：十二、picker滚动选择器

微信小程序组件解读和分析：十二、picker滚动选择器相关推荐

最新文章

热门文章