微信小程序實現(xiàn)日歷小功能
更新時間:2020年11月18日 11:39:09 作者:Archer_yy
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日歷小功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)日歷功能的具體代碼,供大家參考,具體內容如下
代碼
<!-- 日歷 --> <view class="gradient"> <view class="box"> <view class="spaceAroundCenter flex_align_justify_b"> <view class="flex-item"> <view class="item-content flex_align_justify_c" bindtap="doDay" data-key='left'> <view class="glyphicon glyphicon-triangle-left"> <van-icon name="arrow-left" class="flex_align" /> </view> </view> </view> <view class="flex-item item-content-current-day"> <view class="item-content flex_align_justify_c">{{currentDate}}</view> </view> <view class="flex-item"> <view class="item-content flex_align_justify_c" bindtap="doDay" data-key="right"> <view class="glyphicon glyphicon-triangle-right"> <van-icon name="arrow" class="flex_align" /> </view> </view> </view> </view> <view class="spaceAroundCenter"> <view class="spaceAroundCenter_date">一</view> <view class="spaceAroundCenter_date">二</view> <view class="spaceAroundCenter_date">三</view> <view class="spaceAroundCenter_date">四</view> <view class="spaceAroundCenter_date">五</view> <view class="spaceAroundCenter_date">六</view> <view class="spaceAroundCenter_date">日</view> </view> <view class="spaceAroundCenter"> <view class="flex-item day_item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}"> <view id='{{vo}}' class="item-content flex_align_justify_c bk-color-day" wx:if="{{vo == currentDay}}" bindtap='onClickItem'>{{vo}}</view> <view id='{{vo}}' class="item-content flex_align_justify_c bk-color-dayClick" wx:elif="{{vo == currentClickKey && currentClickKey != '' && vo != ''}}" bindtap='onClickItem'>{{vo}}</view> <view id='{{vo}}' class="item-content flex_align_justify_c" bindtap='onClickItem' wx:else>{{vo}}</view> <view class="day_item_circle" wx:if="{{currentClickKey!=''&¤tClickKey==vo&&remindlist.length>=1}}"></view> </view> </view> </view> </view>
CSS:
/* 日歷 */ .gradient{ background: #fff; margin-bottom: 16rpx; overflow: hidden; border-bottom: 1rpx solid #f1f1f1; } .gradient .box{ padding: 0 24rpx; } .glyphicon .iconfont{ font-size: 46rpx; } .spaceAroundCenter { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } .spaceAroundCenter_date{ font-size: 28rpx; } .flex-item { /* flex-flow: nowrap; flex-grow: 1; flex-shrink: 1; */ width: 14.2%; /* padding: 10rpx 0; */ height: 85rpx; display: flex; align-items: center; justify-content: center; } .item-content { font-size: 28rpx; width:80%; height: 60%; } /* 當前日期 */ .bk-color-day { color: #fff; border-radius: 50%; background-color: #dd5923; } /* 當前選中日期 */ .bk-color-dayClick { color: #fff; border-radius: 50%; background-color: #30318b; } .item-content-current-day { flex-grow: 2; } .day_item{ position: relative; } .day_item_circle{ width: 10rpx; height: 10rpx; background: #dd5923; position: absolute; bottom: 0; border-radius: 50%; }
js:
Page({ data: { currentDayList: '', currentObj:'', arr: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''], currentDate:'', currentDay:'', year:'', month:'', currentClickKey:'', remindlist:[1,2,3] }, onLoad: function (options) { var currentObj = this.getCurrentDayString() this.setData({ currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月', currentDay: currentObj.getDate(), currentObj: currentObj, year: currentObj.getFullYear(), month: currentObj.getMonth() + 1 }) this.setSchedule(currentObj); }, doDay: function (e) { this.setData({ currentClickKey:'' }) var arr = this.data.arr; for (let i in arr) { var newarr = 'arr[' + i + ']'; this.setData({ [newarr]: '' }) } var that = this var currentObj = that.data.currentObj var Y = currentObj.getFullYear(); var m = currentObj.getMonth() + 1; var d = currentObj.getDate(); var str = '' if (e.currentTarget.dataset.key == 'left') { m -= 1 if (m <= 0) { str = (Y - 1) + '/' + 12 + '/' + d } else { str = Y + '/' + m + '/' + d } } else { m += 1 if (m <= 12) { str = Y + '/' + m + '/' + d } else { str = (Y + 1) + '/' + 1 + '/' + d } } currentObj = new Date(str) this.setData({ currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月', currentObj: currentObj, year: currentObj.getFullYear(), month: (currentObj.getMonth() + 1), day: '' }) this.setSchedule(currentObj); }, getCurrentDayString: function () { var objDate = this.data.currentObj if (objDate != '') { return objDate } else { var c_obj = new Date() var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate() return new Date(a) } }, setSchedule: function (currentObj) { var that = this var m = currentObj.getMonth() + 1 var Y = currentObj.getFullYear() var d = currentObj.getDate(); var dayString = Y + '/' + m + '/' + currentObj.getDate() var currentDayNum = new Date(Y, m, 0).getDate() var currentDayWeek = currentObj.getUTCDay() + 1 var result = currentDayWeek - (d % 7 - 1); var firstKey = result <= 0 ? 7 + result : result; var currentDayList = [] var f = 0 for (var i = 0; i < 42; i++) { let data = [] if (i < firstKey - 1) { currentDayList[i] = '' } else { if (f < currentDayNum) { currentDayList[i] = f + 1 f = currentDayList[i] } else if (f >= currentDayNum) { currentDayList[i] = '' } } } that.setData({ currentDayList: currentDayList }) }, // 設置點擊事件 onClickItem: function (e) { // console.log(JSON.stringify(e)); // console.log(JSON.stringify(e.currentTarget)); this.setData({ currentClickKey: e.currentTarget.id }); }, })
為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
input 標簽實現(xiàn)輸入框帶提示文字效果(兩種方法)
這篇文章主要介紹了input 標簽實現(xiàn)輸入框帶提示文字效果(兩種方法),需要的朋友可以參考下2017-10-10javascript跨域方法、原理以及出現(xiàn)問題解決方法(詳解)
javascript出于安全方面的考慮,不允許跨域調用其他頁面的對象。但是在安全限制的同時也給注入iframe或是ajax應用上帶來了不少麻煩。跨域簡單的理解就是因為javascript同源策略的限制,a.com域名下的js無法操作b.com 或者是c.a.com域名下的對象2015-08-08JavaScript實現(xiàn)添加及刪除事件的方法小結
這篇文章主要介紹了JavaScript實現(xiàn)添加及刪除事件的方法,實例總結了javascript對事件的添加及刪除的技巧,涉及javascript事件綁定的方法及瀏覽器兼容的相關注意事項,需要的朋友可以參考下2015-08-08JS表單提交驗證、input(type=number) 去三角 刷新驗證碼
在進行表單提交時,需要對輸入框和文本域等的value的合理性進行驗證,可以編寫form的onSubmit事件,下面給大家介紹js表單提交驗證input(type=number) 去三角 刷新驗證碼注意事項,一起看看吧2017-06-06