微信小程序實現(xiàn)日歷效果
更新時間：2018年12月28日 14:46:42 作者：豆i漿
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日歷效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
效果預覽:
wxml部分:
<view class='box1' style='width: {{ sysW * 7 }}px'>
<view class='dateBox'>{{ year }} - {{ month}}</view>
<block wx:for='{{ weekArr }}'>
<view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{ item }}</view>
</block>
<block wx:for='{{ arr }}'>
<view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class='{{ item == getDate ? "dateOn" : ""}}'>{{ item }}</view>
</block>
</view>
wxss部分：
.box1 .dateBox{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
margin-top: 20px;
font-size: 40rpx;
}
.box1{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.box1>view{
height: 30px;
line-height: 30px;
text-align: center;
font-size: 34rpx;
}
.dateOn{
border-radius: 50%;
background-color: hotpink;
color: #fff;
}
js部分:
// page/index/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
arr: [],
sysW: null,
lastDay: null,
firstDay: null,
weekArr: ['日', '一', '二', '三', '四', '五','六'],
year: null
},
//獲取日歷相關參數(shù)
dataTime: function () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() ;
var months = date.getMonth() + 1;
//獲取現(xiàn)今年份
this.data.year = year;
//獲取現(xiàn)今月份
this.data.month = months;
//獲取今日日期
this.data.getDate = date.getDate();
//最后一天是幾號
var d = new Date(year, months, 0);
this.data.lastDay = d.getDate();
//第一天星期幾
let firstDay = new Date(year, month, 1);
this.data.firstDay = firstDay.getDay();
},
onLoad: function (options) {
this.dataTime();
//根據(jù)得到今月的最后一天日期遍歷 得到所有日期
for (var i = 1; i < this.data.lastDay + 1; i++) {
this.data.arr.push(i);
}
var res = wx.getSystemInfoSync();
this.setData({
sysW: res.windowHeight / 12,//更具屏幕寬度變化自動設置寬度
marLet: this.data.firstDay,
arr: this.data.arr,
year: this.data.year,
getDate: this.data.getDate,
month: this.data.month
});
}
})
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jscript讀寫二進制文件的方法,涉及javascript中ActiveXObject對象的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了ES6新數(shù)據(jù)結構Map功能與用法,結合實例形式分析了Map的功能、使用方法及相關注意事項,需要的朋友可以參考下2017-03-03
YOLOV5模型從發(fā)布到現(xiàn)在都是炙手可熱的目標檢測模型,被廣泛運用于各大場景之中,下面這篇文章主要給大家介紹了關于yolov5項目部署+微信小程序前端展示的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
淺談redux, koa, express 中間件實現(xiàn)對比解析
這篇文章主要介紹了淺談redux, koa, express 中間件實現(xiàn)對比解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
BootStrap Validator 版本差異問題導致的submitHandler失效問題的解決方法
這篇文章主要介紹了BootStrap Validator 版本差異問題導致的submitHandler失效問題的解決方法,下面通過本文給大家詳細說明一下，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)文字跑馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了微信小程序wepy框架學習和使用心得詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
在前端,處理文件下載通常涉及到接收一個文件流,本文為大家整理了前端文件下載并接受文件流的一些常見方法,有需要的小伙伴可以參考一下2024-12-12
JavaScript?為我們提供了很多操作符，用于操作表達式。下面就來盤點一下?JavaScript?中那些強大的操作符，感興趣的小伙伴可以了解一下2022-09-09
JavaScript 獲取 URL 中參數(shù)值的方法
本文將詳細介紹幾種在 JavaScript 中獲取 URL 參數(shù)值的方法,包括現(xiàn)代瀏覽器支持的 URLSearchParams、正則表達式解析以及自定義函數(shù)解析方案,并討論各自的優(yōu)缺點及適用場景,感興趣的朋友一起看看吧2025-04-04