生活随笔
收集整理的這篇文章主要介紹了
微信小程序 选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
日期選擇
<view class="section"><picker mode="date" value="{{date}}" start="1980-01-01" end="{{ dates2 }}" bindchange="StartDate"><view class="picker">開始日期:
<text style="color:blue;">{{dates1}}
</text></view></picker>
</view>
StartDate
: function (e
) {console
.log("StartDate>>>" + e
.detail
.value
)this.setData({dates1
: e
.detail
.value
})
},
data
: {dates1
: "2020-01-01",
},
普通選擇器
<view class="section__title">普通選擇器：（普通數組）
</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">當前選擇：{{array[index]}}
</view>
</picker>
bindPickerChange
: function (e
) {console
.log('picker發送選擇改變，攜帶值為', e
.detail
.value
)this.setData({index
: e
.detail
.value
})
},
data
:{array
: ['選項1', '選項2', '選項3', '選項4'],index
: 0,
},
普通選擇器 json 格式數組
<view class="section"><view class="section__title">普通選擇器2：（普通json格式數組）
</view><picker bindchange="bindPickerChange2" value="{{objectIndex}}" range="{{objectArray}}" range-key="name"><view class="picker">當前選擇：{{objectArray[objectIndex].name}}
</view></picker>
</view>
data
:{
objectArray
: [{id
: 0,name
: '中國'},{id
: 1,name
: '美國'},{id
: 2,name
: '德國'},{id
: 3,name
: '法國'}
],
objectIndex
: 0,
},
bindPickerChange2
: function (e
) {console
.log('picker發送選擇改變，攜帶值為', e
.detail
.value
)this.setData({objectIndex
: e
.detail
.value
})
},
總結
以上是生活随笔為你收集整理的微信小程序 选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
