微信小程序?qū)崿F(xiàn)時(shí)間選擇
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)時(shí)間選擇的具體代碼,供大家參考,具體內(nèi)容如下
xml:
<view class="day-check" style="position:fixed;"> ? <picker class="picker_color" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange"> ? ? <view class="line-left"></view> ? ? <view class="turn_down_view"> ? ? ? <text class="picker_text">{{dateValue}}</text> ? ? ? <image class="img_down" src="/pages/images/turn_down.png"></image> ? ? </view> ? </picker> ? <text class="text_check">至</text> ? <picker class="picker_color" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange"> ? ? <view class="line-left"></view> ? ? <view class="turn_down_view"> ? ? ? <text class="picker_text">{{dateValue}}</text> ? ? ? <image class="img_down" src="/pages/images/turn_down.png"></image> ? ? </view> ? </picker> </view> ? <view class="line_view"></view>
css:
.day-check { ? width: 100%; ? height: 30px; ? display: flex; ? flex-direction: row; ? justify-content: center; ? border-bottom: 1px solid rgb(212, 212, 212); ? } ? .picker_color { ? width: 50%; ? height: 30px; ? line-height: 30px; } ? .turn_down_view { ? width: 100%; ? height: 30px; ? display: flex; ? flex-direction: row; ? justify-content: center; } ? .picker_text { ? width: 50%; ? height: 30px; ? line-height: 30px; ? font-size: 30rpx; ? text-align: center; } ? .img_down { ? width: 20px; ? height: 20px; ? margin-top: 5px; } ? .text_check { ? width: 6%; ? height: 30px; ? line-height: 30px; ? font-size: 30rpx; ? text-align: center; } ? .order_query_item:active{ ? background-color: rgb(223, 11, 11); }
js:
var animation // 時(shí)間 const date = new Date() const years = [] const months = [] const days = [] ? for (let i = 1990; i <= date.getFullYear(); i++) { ? years.push(i) } ? for (let i = 1; i <= 12; i++) { ? var k = i; ? if (0 <= i && i <= 9) { ? ? k = "0" + (i); ? } else { ? ? k = (i); ? } ? months.push(k) } ? for (let i = 1; i <= 31; i++) { ? var k = i; ? if (0 <= i && i <= 9) { ? ? k = "0" + (i); ? } else { ? ? k = (i); ? } ? days.push(k) } ? Page({ ? ? /** ? ?* 頁(yè)面的初始數(shù)據(jù) ? ?*/ ? data: { ? ? currentIndex: 0, ? ? dateValue: '選擇時(shí)間', ?? ? }, ? datePickerBindchange: function (e) { ? ? this.setData({ ? ? ? dateValue: e.detail.value ? ? }) ? }, ? pickChange: function (e) { ? ? this.setData({ ? ? ? index: e.detail.value ? ? }); ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 ? ?*/ ? onLoad: function (options) { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 ? ?*/ ? onReady: function () { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 ? ?*/ ? onShow: function () { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 ? ?*/ ? onHide: function () { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 ? ?*/ ? onUnload: function () { ? ? }, ? ? /** ? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 ? ?*/ ? onPullDownRefresh: function () { ? ? }, ? ? /** ? ?* 頁(yè)面上拉觸底事件的處理函數(shù) ? ?*/ ? onReachBottom: function () { ? ? }, ? ? /** ? ?* 用戶點(diǎn)擊右上角分享 ? ?*/ ? onShareAppMessage: function () { ? ? } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript?Echarts柱狀圖label優(yōu)化中問題針對(duì)講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12如何利用moment處理時(shí)間戳并計(jì)算時(shí)間的差值
前端很多場(chǎng)景都會(huì)涉及到對(duì)時(shí)間的處理,我所用得最多的庫(kù)是moment,下面這篇文章主要給大家介紹了關(guān)于如何利用moment處理時(shí)間戳并計(jì)算時(shí)間的差值的相關(guān)資料,需要的朋友可以參考下2022-04-04利用JS實(shí)現(xiàn)數(shù)字增長(zhǎng)
做項(xiàng)目時(shí)候常常遇到,要做一個(gè)數(shù)字滾動(dòng)增加的效果。如何利用JavaScript實(shí)現(xiàn)數(shù)字增長(zhǎng)效果,一起來跟本文學(xué)習(xí)學(xué)習(xí)。2016-07-07js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊后將文字或圖片復(fù)制到剪貼板的方法,功能非常實(shí)用,需要的朋友可以參考下2014-08-08JavaScript用Number方法實(shí)現(xiàn)string轉(zhuǎn)int
parseInt方法在format'00'開頭的數(shù)字時(shí)會(huì)當(dāng)作2進(jìn)制轉(zhuǎn)10進(jìn)制,所以建議string轉(zhuǎn)int最好用Number方法2014-05-05超級(jí)簡(jiǎn)單實(shí)現(xiàn)JavaScript MVC 樣式框架
本文給大家分享的是一則翻譯過來的,由國(guó)外友人寫的如何簡(jiǎn)單有效的實(shí)現(xiàn)javascript MVC樣式框架,算是一個(gè)MVC的入門教程,希望大家能夠喜歡。2015-03-03