微信小程序滾動(dòng)選擇器怎么做的

2017-12-05

導(dǎo)讀：2017年6月14日，微信小程序滾動(dòng)選擇器已經(jīng)是當(dāng)下最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦驖L動(dòng)選擇器相關(guān)的內(nèi)容。...

微信小程序滾動(dòng)選擇器已經(jīng)是當(dāng)下最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦驖L動(dòng)選擇器相關(guān)的內(nèi)容。

組件說明：

picker：

滾動(dòng)選擇器，現(xiàn)支持三種選擇器，通過mode屬性來區(qū)分，分別是普通選擇器(mode = selector)，時(shí)間選擇器(mode = time)，日期選擇器(mode = date)，默認(rèn)是普通選擇器。

wxml

<text class="page__title">picker</text>

</view>

當(dāng)前選擇：{{array[index]}}

</view>

</picker>

</view>

當(dāng)前選擇: {{time}}

</view>

</picker>

</view>

<view class="section__title">日期選擇器</view>

當(dāng)前選擇: {{date}}

</view>

</picker>

</view>

Page({

data: {

array: ['中國(guó)', '美國(guó)', '巴西', '日本'],

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)

屬性名

類型

默認(rèn)值

說明

range

Array

[ ]

mode為 selector 時(shí)，range 有效

value

Number

mode為 selector 時(shí)，是數(shù)字，表示選擇了 range 中的第幾個(gè)，從0開始。

bindchange

EventHandle

向右添加列

value改變時(shí)觸發(fā)change事件，event.detail = {value: value}

時(shí)間選擇器：(mode = time)

屬性名

類型

默認(rèn)值

說明

value

String

表示選中的時(shí)間，格式為”hh:mm”

start

String

表示有效時(shí)間范圍的開始，字符串格式為”hh:mm”

end

String

表示有效時(shí)間范圍的結(jié)束，字符串格式為”hh:mm”

bindchange

EventHandle

value改變時(shí)觸發(fā)change事件，event.detail = {value: value}

日期選擇器：(mode = date)

屬性名

類型

默認(rèn)值

說明

value

String

表示選中的日期，格式為”YYYY-MM-DD”

start

String

表示有效日期范圍的開始，字符串格式為”YYYY-MM-DD”

end

String

表示有效日期范圍的結(jié)束，字符串格式為”YYYY-MM-DD”

fields

String

day

有效值year,month,day，表示選擇器的粒度

bindchange

EventHandle

value改變時(shí)觸發(fā)change事件，event.detail = {value: value}

微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單

微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單，只需要五步就可以完成，整個(gè)過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情

第二部分：如何開通一個(gè)小商店

微信小程序滾動(dòng)選擇器怎么做的

微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單