提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2017-12-05 作者:黄保
微信小程序滚动选择器已经是当下最热门的话题,下面将从多方面来谈谈微信小程序滚动选择器相关的内容。
组件说明:
picker:
滚动选择器,现支持三种选择器,通过mode属性来区分,分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),默认是普通选择器。
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>
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
})
}
})
wxss
.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;
}
主要属性:
普通选择器:(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}
微信小程序商城系统开发其实很简单,只需要五步就可以完成,整个过程包括开发、上线、发布都可以轻松搞定...详情
推荐文章
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
2017年6月14日,微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。...
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等,每个品牌都有各自的特点和主要发展的行业,下面小编就为大家来介...
餐饮行业是国内规模万亿级别的市场,如今市面上的餐饮品牌门店数不胜数,在如今这个互联网时代,许许多多餐饮门店都开...
连锁超市在选择收银系统的时候,首先会考虑到收银系统的操作便捷,能够给收银员的工作提升效率的同时,避免出现错误,...
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术,它不仅提高了结账效率,还增强了顾客的购物体...
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件,它能够实现...
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...