首頁 > 微信小程式 > 小程式開發 > 微信小程式picker元件詳解實例程式碼

微信小程式picker元件詳解實例程式碼

高洛峰
發布: 2017-03-21 16:48:49
原創
2815 人瀏覽過

這篇文章主要介紹了微信小程式picker 元件詳解及簡單實例的相關資料,需要的朋友可以參考下

實現效果圖:

微信小程式picker元件詳解實例程式碼

微信小程式picker

捲動選擇器,現支援三種選擇器,透過mode來區分,分別是普通選擇器,時間選擇器日期選擇器,預設是普通選擇器

普通選擇器:mode=selector

屬性名稱 類型 預設值 #說明
range #Array [] mode為selector時,range有效
value Number 0 mode為selector時,是數字,表示選擇了range中的第幾個,從0開始。
bindchange EventHandle   value改變時觸發change事件,event.detail= { value:value}

時間選擇器:mode=time

 表示選取的時間,格式為"hh:mm" String 表示有效時間範圍的開始, String 表示有效時間範圍的結束,字串格式為"hh:mm" EventHandle value改變時觸發change事件,event.detail= { value:value}
#屬性名稱 類型 預設值 說明
value ##String
字串格式為"hh:mm"

日期選擇器:mode=date

屬性名稱#類型預設值valuestartendfieldsbindchange
##說明
String 0 表示選取的日期,格式為"yyyy-MM-dd"
String   #表示有效日期範圍的開始,字串格式為"yyyy-MM-dd"
String 表示有效日期範圍的結束,字串格式為" yyyy-MM-dd"
String #day 有效值year,month,day,表示選擇器的粒度
EventHandle value改變時觸發change事件,event.detail= { value:value}

範例程式碼:

<view class="section">
 <view class="sectiontitle">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
 <view class="picker">
  当前选择:{{array[index]}}
 </view>
 </picker>
</view>
<view class="section">
 <view class="sectiontitle">时间选择器</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="sectiontitle">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
 <view class="picker">
  当前选择: {{date}}
 </view>
 </picker>
</view>
登入後複製
Page({
 data: {
 array:["美国","中国","巴西","日本"],
 index:0,
 date:"2016-09-01",
 time:"12:01"
 },
 bindPickerChange: function(e) {
 console.log(&#39;picker发送选择改变,携带值为&#39;, 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.time
 })
 }
})
登入後複製
感謝閱讀,希望能幫助大家,謝謝大家對本站的支持!

以上是微信小程式picker元件詳解實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板