微信小程序 滾動選擇器(時間日期)詳解及實例代碼
更新時間：2017年02月22日 10:34:23 投稿：lqh
這篇文章主要介紹了微信小程序 滾動選擇器(時間日期)詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序 滾動選擇器(時間日期)詳解
微信小程序自己封裝了很多控件，用起來確實很方便，如果這是Android里面，還需要自己去定義，不廢話，效果圖：
一起來看看怎么實現(xiàn)的呢？看完你應(yīng)該就該說，尼瑪，這就行啦….
這個效果呢，要用到picker組件，動畫從底部彈起的滾動選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器。
看下相應(yīng)的屬性：
具體的來看看代碼，布局:
<view class="section" >
<picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">
<view class="picker">
國家：{{objectArray[index]}}
</view>
</picker>
</view>
<view class="section">
<picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
<view class="picker">
時間 : {{times}}
</view>
</picker>
</view>
<view class="section">
<picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange">
<view class="picker">
日期: {{dates}}
</view>
</picker>
</view>
css樣式:
.section{
background:#CABBC7;
margin:20rpx;
padding:20rpx
}
js代碼：
Page({
data: {
dates: '2016-11-08',
times: '12:00',
objectArray: ['中國', '英國', '美國'],
index: 0,
},
// 點擊時間組件確定事件
bindTimeChange: function (e) {
console.log("誰哦按")
this.setData({
times: e.detail.value
})
},
// 點擊日期組件確定事件
bindDateChange: function (e) {
console.log(e.detail.value)
this.setData({
dates: e.detail.value
})
},
// 點擊城市組件確定事件
bindPickerChange: function (e) {
console.log(e.detail.value)
this.setData({
index: e.detail.value
})
}
代碼很簡單，分別綁定事件，點擊切換就Ok。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
在SQL查詢中根據(jù)已知ID的集合來查詢結(jié)果我們通常會用到IN，直接在IN后面給出ID的集合或是在IN后面跟一個子查詢。2011-08-08
SqlServer2012中First_Value函數(shù)簡單分析
SQL SERVER 2012 T-SQL新增幾個聚合函數(shù): FIRST_VALUE LAST_VALUE LEAD LAG，今天我們首先來簡單分析下FIRST_VALUE,希望對大家有所幫助，能夠盡快熟悉這個聚合函數(shù)2014-08-08
SQLServer中master數(shù)據(jù)庫分析
sql下master數(shù)據(jù)庫分析，了解下master數(shù)據(jù)庫主要是做什么用的2008-04-04
sqlserver數(shù)據(jù)庫導(dǎo)入方法的詳細圖文教程
導(dǎo)入數(shù)據(jù)也是數(shù)據(jù)庫操作中使用頻繁的功能,下面這篇文章主要給大家介紹了關(guān)于sqlserver數(shù)據(jù)庫導(dǎo)入方法的詳細圖文教程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了SQL Server 2008 R2登錄失敗的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于SQLServer審計功能配置的相關(guān)資料,SQL Server 的審計功能可以捕獲數(shù)據(jù)庫的活動和事件,包括登錄、DDL 和 DML 操作、失敗的登錄嘗試、權(quán)限更改等,需要的朋友可以參考下2024-01-01
對于開發(fā)人員來說，日期處理或許簡單，或許很難。結(jié)合自己過往的開發(fā)經(jīng)驗并整合網(wǎng)上的例子，總結(jié)出一些日期相關(guān)的操作，供自己備用及為大家分享2012-06-06
sqlserver建立新用戶及關(guān)聯(lián)數(shù)據(jù)庫教程
本文講的是SQLserver數(shù)據(jù)庫創(chuàng)建新用戶方法以及賦予此用戶特定權(quán)限的方法，非常的簡單實用，有需要的小伙伴可以參考下2018-01-01
解讀SQL一些語句執(zhí)行后出現(xiàn)異常不會回滾的問題
這篇文章主要介紹了解讀SQL一些語句執(zhí)行后出現(xiàn)異常不會回滾的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章介紹了SQL Server實現(xiàn)分頁的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03