微信小程序滾動選擇器怎么做的
微信小程序滾動選擇器已經(jīng)是當下最熱門的話題，下面將從多方面來談談微信小程序滾動選擇器相關的內(nèi)容。
組件說明：
picker：
滾動選擇器，現(xiàn)支持三種選擇器，通過mode屬性來區(qū)分，分別是普通選擇器(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">地區(qū)選擇器</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發(fā)送選擇改變，攜帶值為', 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 時，是數(shù)字，表示選擇了 range 中的第幾個，從0開始。
bindchange
EventHandle
向右添加列
value改變時觸發(fā)change事件，event.detail = {value: value}
時間選擇器：(mode = time)
屬性名
類型
默認值
說明
value
String
表示選中的時間，格式為”hh:mm”
start
String
表示有效時間范圍的開始，字符串格式為”hh:mm”
end
String
表示有效時間范圍的結束，字符串格式為”hh:mm”
bindchange
EventHandle
value改變時觸發(fā)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改變時觸發(fā)change事件，event.detail = {value: value}
-
微信小程序商城系統(tǒng)開發(fā)其實很簡單
微信小程序商城系統(tǒng)開發(fā)其實很簡單，只需要五步就可以完成，整個過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分：如何開通一個小商店
- 關注官方公眾號 -
咨詢電話：4006-089-731