小程序實現日歷效果
更新時間：2022年08月29日 08:52:42 作者：rainbow8590
這篇文章主要為大家詳細介紹了小程序實現日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序實現日歷效果的具體代碼，供大家參考，具體內容如下
項目中需要做一個日歷,最終效果如下:
日歷實現是可以點擊日期左右箭頭和彈窗選擇日期,下面上代碼:
html:
<!--index.wxml-->
<view class="container">
? <view class="wrap">
? ? <view class="teacherInfo flex">
? ? ? <view><text>{{teacherName}}</text>老師</view>
? ? ? <image id="menu" src="../images/menu.gif" bindtap="powerDrawer" data-statu="{{isopen}}"></image>
? ? </view>
? ? <view class="tab" style="height:{{heigh}}px">
? ? ? <view class="tabTitle">
? ? ? ? <scroll-view scroll-x="true" class="weui-navbar">
? ? ? ? ? <view id="0" class="{{activeIndex == 0 ?'titleActive':''}} titleItem" bindtap="tabClick" >
? ? ? ? ? ? 我的課表
? ? ? ? ? ? <view class="arrow" wx:if="{{showArrow}}"></view>
? ? ? ? ? </view>
? ? ? ? ? <view id="1" class="{{activeIndex == 1 ?'titleActive':''}} titleItem" bindtap="tabClick">
? ? ? ? ? ? 高思校歷
? ? ? ? ? ? <view class="arrow" wx:if="{{!showArrow}}"></view>
? ? ? ? ? </view>
? ? ? ? </scroll-view>
? ? ? </view>
? ? ? <view class="tabBody" style="height:{{heigh-34-55}}px">
? ? ? ? <view class="tabBodyWrap" style="height:{{heigh-34-55}}px;">
? ? ? ? ? <swiper current="{{activeIndex}}" duration="500" bindchange="swiperChange" style="height:{{heigh-34-55}}px;">
? ? ? ? ? ? <!-- 課表 -->
? ? ? ? ? ? <swiper-item>
? ? ? ? ? ? ? <view class="tabBodyItem" style="height:{{heigh-34-55}}px;">
? ? ? ? ? ? ? ? <view class="checkDate">
? ? ? ? ? ? ? ? ? <view class="checkDateWrap">
? ? ? ? ? ? ? ? ? ? <view class="date" bindtap="showFloat">{{cur_year}}年{{cur_month}}月</view>
? ? ? ? ? ? ? ? ? ? <view class="leftArrow" data-handle="prev" bindtap="handleCalendar"></view>
? ? ? ? ? ? ? ? ? ? <view class="rightArrow" data-handle="next" bindtap="handleCalendar"></view>
? ? ? ? ? ? ? ? ? ? <view class="bottomArrow"></view>
? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? <view class="today" bindtap="tapToday">今天</view>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="month">
? ? ? ? ? ? ? ? ? <view class="monthTitle flex">
? ? ? ? ? ? ? ? ? ? <block wx:for="{{weekArr}}">
? ? ? ? ? ? ? ? ? ? ? <view style="width:{{100/7}}%;text-align:center; color:{{index==5 || index==6 ? '#888':'#888'}}">{{item}}</view>
? ? ? ? ? ? ? ? ? ? </block>
? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? <view class="monthBody flex">
? ? ? ? ? ? ? ? ? ? <view wx:if="{{hasEmptyGrid}}" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}" style="width:{{100/7}}%;"></view>
? ? ? ? ? ? ? ? ? ? <block wx:for="{{days}}">
? ? ? ? ? ? ? ? ? ? ? <view class="item" ?style="width:{{100/7}}%;" bindtap="tapDayItem" data-idx="{{index}}">
? ? ? ? ? ? ? ? ? ? ? ? <view class="num {{index == cur_day-1?'nowDayColor':''}} {{item.classInfo.length?'haveClass':''}} {{item.choosed==true?'tipColor':''}}" style="color:;">{{item.day}}</view>
? ? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? </block>
? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="selectDetail" style="height:{{}}px;">
? ? ? ? ? ? ? ? ? <view class="detailItem flex" wx:for="{{classContent}}">
? ? ? ? ? ? ? ? ? ? <view class="dot">●</view>
? ? ? ? ? ? ? ? ? ? <view class="content">
? ? ? ? ? ? ? ? ? ? ? ?<view>{{item.dtDateSect}}</view>
? ? ? ? ? ? ? ? ? ? ? ?<view>{{item.title}}</view>
? ? ? ? ? ? ? ? ? ? ? ?<view class="address"><text wx:if="{{!item.sRoomName}}">{{item.sAreaName}}</text>{{item.sRoomName}}</view>
? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? <view class="kejie">第{{item.nLessonNo}}講</view>
? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? <!-- 無課程 -->
? ? ? ? ? ? ? ? ? <view class="detailItem detailItem1 flex" wx:if="{{!classContent.length}}">
? ? ? ? ? ? ? ? ? ? <view class="dot dot1">●</view>
? ? ? ? ? ? ? ? ? ? <view class="content">
? ? ? ? ? ? ? ? ? ? ? ?<view>今日無課程</view>
? ? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? ? ? <view class="kejie">--</view>
? ? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? </view>
? ? ? ? ? ? </swiper-item>
? ? ? ? ? ? <!-- 校歷 -->
? ? ? ? ? ? <swiper-item>
? ? ? ? ? ? ? <view class="tabBodyItem" style="height:{{heigh-34-55}}px;overflow-y: scroll;">
? ? ? ? ? ? ? ? <view><image src="{{picSrc}}" bindtap="previewImage" mode='widthFix' style="width:100%;" ></image></view>
? ? ? ? ? ? ? </view>
? ? ? ? ? ? </swiper-item>
? ? ? ? ? </swiper>
? ? ? ? </view>
? ? ? </view>
? ? </view>
? </view>
<!-- 年月浮窗 -->
? <view class="float" wx:if="{{show}}" ?data-id="float" bindtap="closeFloat">
? ? <view class="floatWrap flex">
? ? ? <div class="year">
? ? ? ? <view style="padding-top:0 ;"><image src="../images/nianyue.png"></image></view>
? ? ? ? <block wx:for="{{yearArr}}">
? ? ? ? ? <view style="color:{{current1 == item?'#1FBB1C':'#888'}}" bindtap="changeBgColor1" data-cur="{{item}}">{{item}}</view>
? ? ? ? </block>
? ? ? </div>
? ? ? <div class="month flex">
? ? ? ? <block wx:for="{{monthArr}}">
? ? ? ? ? <view style="margin-top:0 ; background:{{current == index?'#1FBB1C':'#fff'}};color:{{current == index?'#fff':'#888'}}" bindtap="changeBgColor" data-cur="{{item}}">{{item}}</view>
? ? ? ? </block>
? ? ? </div>
? ? </view>
? </view>
? <!-- 彈窗 -->
<!-- ? <view class="float" wx:if="{{show}}" data-id="float" bindtap="closeFloat">
? ? <view class="floatWrap">
? ? ? <view class="arrows arrowT"><image class="arrowT" src="../images/arrow-t.png"></image></view>
? ? ? <view class="floatC">
? ? ? ? <view class="floatC-item" wx:for="{{arr}}" data-id="{{item.id}}" wx:key="id" bindtap="getIndex">{{item.value}}</view>
? ? ? </view>
? ? ? <view class="arrows arrowB"><image class="arrowB" src="../images/arrow-b.png"></image></view>
? ? </view>
? </view>
?-->
? <!-- 導航 -->
? <view class="zoom" wx:if="{{zoomShow}}"></view>
? <view animation="{{animationData}}" class="mainMenu drawer_attr_box" wx:if="{{showModalStatus}}" bindtap="closeNav" data-id="closeNav">
? ? <view class="menu" data-id="menu">
? ? ? ? <view class="userinfo flex">
? ? ? ? ? ? <view class="Avatar">
? ? ? ? ? ? ? ? <image src="../images/noface.png" mode='widthFix'></image>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="name">{{teacherName}}</view>
? ? ? ? </view>
? ? ? ? ?<view class="con"><navigator open-type="reLaunch" url='/pages/entranceDoor/entranceDoor'>錄入進考門</navigator></view>
? ? ? ? <view class="con"><navigator open-type="reLaunch" url='/pages/scorePic/scorePic'>生成成績單</navigator></view>
? ? ? ? <view class="con"><navigator open-type="reLaunch" url='/pages/taskCard/taskCard'>生成任務卡</navigator></view>
? ? ? ? <view class="con"><navigator open-type="reLaunch" url='/pages/cardIndex/cardIndex'>轉發(fā)群打卡</navigator></view>
? ? ? ? <view class="quit tac"><button class="btn" bindtap="unlogin" hover-class="hoverLogin">退出登錄</button></view>
? ? </view>
? </view>
? <!-- 導航tab -->
? <view class="tabBar flex">
? ? <view class="tabItem" bindtap="changeColor" wx:for="{{tabBarArr}}" data-id="{{index}}" wx:key="id">
? ? ? <view class="icon"><image class="icon1" mode="aspectFit" src="{{item.iconSrc}}"></image></view>
? ? ? <view class="txt" style="color:{{item.changeTextColor}}">{{item.txt}}</view>
? ? </view>
? </view>
</view>css:
@import "../../utils/public.wxss";
page{
? height: 100%;
}
.container{
? padding: 0;
? height: 100%;
? overflow:hidden;
}
.flex{
? display: flex;
}
/*主體內容*/
.wrap{
? position: relative;
? width: 100%;
? height: 100%;
? background: #fafafa;
? box-sizing: border-box;
}
.wrap .teacherInfo{
? width: 100%;
? height: 110rpx;
? padding: 0 30rpx 0 48rpx;
? background: #fff;
? justify-content: space-between;
? align-items: center;
? font-size: 34rpx;
? color:#666;
? box-sizing: border-box;
}
.wrap .teacherInfo text{
? font-size: 46rpx;
? color: #1FB923;
}
.wrap .teacherInfo image{
? width: 49rpx;
? height: 28rpx;
? padding: 20rpx 0 20rpx 20rpx;
}
.wrap .tab{
? width: 100%;
}
.wrap .tab .tabTitle .titleItem{
? width: 50%;
? font-size: 26rpx;
? text-align: center;
? padding: 10px 0;
? border-bottom: 1px solid #1FB923;
? position: relative;
? display: inline-block;
? color: #979797;
? overflow-y: scroll;
}
.wrap .tab .tabTitle .titleActive{
? color: #32343d;
? background: #f1f1f1;
}
.wrap .tab .tabTitle .titleItem .arrow{
? border: 4px solid #1FB923;
? border-top-color: transparent;
? border-left-color: transparent;
? border-right-color: transparent;
? width: 0;
? height: 0;
? position: absolute;
? left: 50%;
? bottom: 0;
? margin-left: -4px;
}
.wrap .tab .tabBody{
? width: 200%;
? position: relative;
}
.wrap .tab .tabBodyWrap{
? width: 100%;
? position: absolute;
? left: 0;
? top: 0;
}
.wrap .tab .tabBody .tabBodyItem{
? width: 50%;
? flex-direction: row;
}
.wrap .tab .tabBody .tabBodyItem .checkDate{
? position: relative;
? width: 100%;
? height: 44px;
? padding-top: 19px;
? text-align: center;
? box-sizing: border-box;
}
.wrap .tab .tabBody .tabBodyItem .checkDateWrap{
? position: relative;
? width: 26%;
? text-align: center;
? margin-left: 38%;
? box-sizing: border-box;
}
.wrap .tab .tabBody .tabBodyItem .checkDate .date{
? width: 100%;
? height: 100%;
? font-size: 24rpx;
? color: #888;
}
.wrap .tab .tabBody .tabBodyItem .checkDate .leftArrow{
? border: 12rpx solid #838383;
? border-top-color: transparent;
? border-left-color: transparent;
? border-bottom-color: transparent;
? width: 0;
? height: 0;
? position: absolute;
? left: -20px;
? top: 50%;
? margin-top: -6px;
}
.wrap .tab .tabBody .tabBodyItem .checkDate .rightArrow{
? border: 12rpx solid #838383;
? border-top-color: transparent;
? border-right-color: transparent;
? border-bottom-color: transparent;
? width: 0;
? height: 0;
? position: absolute;
? right: -20px;
? top: 50%;
? margin-top: -6px;
}
.wrap .tab .tabBody .tabBodyItem .checkDate .bottomArrow{
? border: 10rpx solid #838383;
? border-left-color: transparent;
? border-right-color: transparent;
? border-bottom-color: transparent;
? width: 0;
? height: 0;
? position: absolute;
? left: 50%;
? top:18px;
? margin-left: -6px;
}
.wrap .tab .tabBody .tabBodyItem .checkDate .today{
? font-size: 22rpx;
? position: absolute;
? right: 30px;
? top: 50%;
? margin-top: -10rpx;
? color: #46b52e;
? background: #fff;
}
.wrap .tab .tabBody .tabBodyItem .month{
? width: 100%;
? padding: 0 30rpx;
? padding-bottom: 20px;
? box-shadow: 0 1px 1px #eee;
? box-sizing: border-box;
? background: #fff;
}
.wrap .tab .tabBody .tabBodyItem .month .monthTitle{
? padding: 14rpx 0;
? font-size: 24rpx;
? border-bottom: 1px solid #e5e5e5;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody{
? flex-wrap: wrap;
? padding-top: 36rpx;
? font-size: 24rpx;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .item{
? position: relative;
? height: 36rpx;
? margin-bottom: 10px;
? text-align: center;
? box-sizing: border-box;
? padding:0 5rpx;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .nowDayColor{
? color: #46b52e;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .tipColor{
? color: #fff!important;
? background: #1FBB1C!important;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .haveClass{
? color: #333;
? background: #b5e1ab;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .activeClass{
? color: #fff;
? background: green;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .num{
? width: 100%;
? height: 100%;
}
.wrap .tab .tabBody .tabBodyItem .month .monthBody .today{
? position: relative;
? left: 0;
? top: -10rpx;
? font-size: 14rpx;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail{
? width: 100%;
? margin-top:10rpx;
? font-size: 24rpx;
? color: #32343d;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .detailItem{
? width: 100%;
? padding: 10px;
? margin-top:10px;
? justify-content: center;
? align-items: center;
? background: #fff;
? box-sizing: border-box;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .detailItem1{
? width: 100%;
? padding: 20px;
? margin-top:10px;
? box-sizing: border-box;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .dot{
? width: 50rpx;
? color: #ef5757;
? padding-top:5rpx;
? text-align: center;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .dot1{
? color: #888;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .content{
? flex: 1;
? line-height: 20px;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .address{
? color: #989898;
}
.wrap .tab .tabBody .tabBodyItem .selectDetail .kejie{
? width: 130rpx;
}
.float .floatWrap{
? width: 572rpx;
? height: 338rpx;
? padding: 26rpx 30rpx 0 20rpx;
? box-sizing: border-box;
? margin-left: -280rpx;
}
.float .floatWrap .year view{
? padding: 20rpx 60rpx;
? font-size: 28rpx;
? color: #888;
}
.float .floatWrap .year image{
? width: 59rpx;
? height: 45rpx;
}
.float .floatWrap .month{
? width: 342rpx;
? flex-wrap: wrap;
? color: #888;
}
.float .floatWrap .month view{
? width: 55rpx;
? height: 55rpx;
? border-radius: 26rpx;
? margin: 20rpx 28rpx;
? font-size: 28rpx;
? text-align: center;
? line-height: 55rpx;
}
.activeStyle{
? background: #1FBB1C;
? color: #fff !important;
}js:
var classList = require('../../utils/classList.js');
var md51 = require('../../utils/md51.js');
var requests = require('../../utils/requests.js');
var publicJs = require('../../utils/public.js');
//獲取應用實例
var app = getApp();
Page({
? data: {
? ? tabBarArr:[
? ? ? {id:0,txt:'錄入',iconSrc:'../images/write.gif',changeTextColor:'#525252',isChange: false},
? ? ? {id:1,txt:'查詢',iconSrc:'../images/search1.gif',changeTextColor:'#1FBB1C',isChange: true},
? ? ? {id:2,txt:'工具',iconSrc:'../images/setting.gif',changeTextColor:'#525252',isChange: false},
? ? ],
? ? teacherName:'張云',
? ? showModalStatus: false, //控制導航顯示
? ? isopen:'open', ?//控制菜單顯示
? ? teacherName: '', //教師名稱
? ? teacherToken:'', //教師token
? ? showArrow:true, //顯示當前tab的箭頭
? ? noticeType: 3, // 默認獲取任務, -1是智庫
? ? taskArr:[], //任務數組
? ? thinkArr:[], //智庫數組
? ? asideFlag:'left', //判斷當前是左側還是右側
? ? // 日期參數
? ? weekArr:[ ?'一', '二', '三', '四', '五', '六','日'],
? ? monthArr:[1,2,3,4,5,6,7,8,9,10,11,12],
? ? yearArr:[2016,2017,2018],
? ? hasEmptyGrid: false,
? ? showPicker: false,
? ? dateInfos:[],
? ? activeIndex: 0
? },
? onLoad: function(){
? ? var that = this;
? ? this.setData({
? ? ? teacherName: wx.getStorageSync('teacherName'),
? ? ? teacherToken: wx.getStorageSync('teacherToken')
? ? })
? ? // 獲取設備高度
? ? wx.getSystemInfo({
? ? ? success: function(res) {
? ? ? ? that.setData({
? ? ? ? ? windowHeight: res.windowHeight,
? ? ? ? ? windowWidth: res.windowWidth,
? ? ? ? ? heigh: res.windowHeight - 55
? ? ? ? })
? ? ? }
? ? });
? ? var date = new Date(); //當前日期
? ? var cur_day = date.getDate(); //當前日
? ? var cur_year = date.getFullYear(); //當前年份
? ? var cur_month = date.getMonth() + 1; //當前月份
? ? this.setData({
? ? ? date:cur_year+'-'+cur_month+'-'+cur_day,
? ? ? current:date.getMonth(),
? ? ? current1:date.getFullYear()
? ? });
? ? this.calculateEmptyGrids(cur_year, cur_month);
? ? this.calculateDays(cur_year, cur_month);
? ? this.setData({
? ? ? cur_year,
? ? ? cur_month,
? ? ? cur_day,
? ? ? nowYear:date.getFullYear(),
? ? ? nowMonth:date.getMonth() + 1,
? ? ? date:cur_year+'-'+cur_month+'-'+cur_day
? ? });
? ? this.getPic();
? },
? // 退出登錄
? unlogin: function(){
? ? publicJs.unlogin()
? },
? ?// 關閉彈窗
? closeFloat: function(e){
? ? publicJs.closeFloat(e,this)
? },
? // 菜單按鈕
? powerDrawer: function (e) {
? ? publicJs.powerDrawer(e,this)
? },
? // 關閉導航
? closeNav: function(e){
? ? publicJs.closeNav(e,this)
? },
? // 點擊改變tabBar顏色
? changeColor: function(e){
? ? publicJs.changeColor(e,this)
? },
? ?// 點擊改變tab
? tabClick:function(e){
? ? var that = this;
? ? var idIndex = e.currentTarget.id;
? ? if(idIndex==0){
? ? ? this.setData({
? ? ? ? showArrow:true,
? ? ? });
? ? }else{
? ? ? this.setData({
? ? ? ? showArrow:false,
? ? ? });
? ? }
? ? this.setData({
? ? ? activeIndex:idIndex,
? ? });
? },
? ?swiperChange:function(e){
? ? ? var current = e.detail.current;?
? ? ? if(current == 0){
? ? ? ? this.setData({
? ? ? ? ? showArrow:true,
? ? ? ? });
? ? ? }else{
? ? ? ? this.setData({
? ? ? ? ? showArrow:false,
? ? ? ? });
? ? ? }
? ? ? this.setData({
? ? ? ? activeIndex:current,
? ? ? ? ? // slideOffset:offsetW
? ? ? });
? },
? // 獲取信息
? getDateInfos: function(callback){
? ? var that = this;
? ? // 時間戳
? ? var stamp = new Date().getTime();
? ? // 學年
? ? var year = this.data.schoolYear;
? ? // 學期
? ? var nSemester = this.data.nSemester;
? ? // 教師token
? ? var token = this.data.teacherToken;
? ? // 獲取信息的類型
? ? var date = this.data.date;
? ? var query1 = 'appid=web&date='+date+'×tamp='+stamp+'&token='+token;
? ? var query2 = {
? ? ? appid: 'web',
? ? ? timestamp:stamp,
? ? ? token:token,
? ? ? date:date,
? ? }
? ? var signS = publicJs.sortQuery(query2)
? ? var sign = md51.md5(signS+'test');?
? ? var query = query1 + '&sign=' + sign;
? ? wx.showLoading({
? ? ? title:'努力加載中...',
? ? ? success: function(){
? ? ? ? requests.requestGet('/api/Calendar/MonthCourse?'+ query,function(res){
? ? ? ? ? console.log(res)
? ? ? ? ? if(res.data.ResultType == 0){
? ? ? ? ? ? var result = res.data.AppendData;
? ? ? ? ? ? that.setData({dateInfos:result})
? ? ? ? ? ? callback();
? ? ? ? ? }else if(res.data.ResultType == 7){
? ? ? ? ? ? wx.showModal({
? ? ? ? ? ? ? title: '提示',
? ? ? ? ? ? ? content: '請重新登陸',
? ? ? ? ? ? ? showCancel: false,
? ? ? ? ? ? ? success:function(){
? ? ? ? ? ? ? ? wx.clearStorageSync();
? ? ? ? ? ? ? ? wx.reLaunch({ url: '/pages/index/index'})
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? wx.hideLoading()
? ? ? ? ? },500)
? ? ? ? })
? ? ? }
? ? })
? },
? // 獲取校歷
? getPic:function(){
? ? var that = this;
? ? // 時間戳
? ? var stamp = new Date().getTime();
? ? // 學年
? ? var year = this.data.schoolYear;
? ? // 學期
? ? var nSemester = this.data.nSemester;
? ? // 教師token
? ? var token = this.data.teacherToken;
? ? // 獲取信息的類型
? ? var date = this.data.date;
? ? var query1 = 'appid=web×tamp='+stamp+'&token='+token;
? ? var query2 = {
? ? ? appid: 'web',
? ? ? timestamp:stamp,
? ? ? token:token,
? ? }
? ? var signS = publicJs.sortQuery(query2)
? ? var sign = md51.md5(signS+'test');?
? ? var query = query1 + '&sign=' + sign;
? ? wx.showLoading({
? ? ? title:'努力加載中...',
? ? ? success: function(){
? ? ? ? requests.requestGet('/api/Calendar/GetSchoolCalendar?'+ query,function(res){
? ? ? ? ? console.log(res)
? ? ? ? ? if(res.data.ResultType == 0){
? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? picSrc:res.data.AppendData
? ? ? ? ? ? })
? ? ? ? ? }else if(res.data.ResultType == 7){
? ? ? ? ? ? wx.showModal({
? ? ? ? ? ? ? title: '提示',
? ? ? ? ? ? ? content: '請重新登陸',
? ? ? ? ? ? ? showCancel: false,
? ? ? ? ? ? ? success:function(){
? ? ? ? ? ? ? ? wx.clearStorageSync();
? ? ? ? ? ? ? ? wx.reLaunch({ url: '/pages/index/index'})
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? wx.hideLoading()
? ? ? ? ? },500)
? ? ? ? })
? ? ? }
? ? })
? },
? previewImage: function(){
? ? var that = this;
? ? wx.previewImage({
? ? ? current: that.data.picSrc, // 當前顯示圖片的http鏈接
? ? ? urls: [that.data.picSrc], // 需要預覽的圖片http鏈接列表
? ? })
? },
? // 點擊改變tab
? changeTab:function(e){
? ? animation(this,e, -this.data.windowWidth,0);
? ? function animation(obj,e ,x1,x2) {
? ? ? var animation = wx.createAnimation({
? ? ? ? duration: 300,?
? ? ? ? timingFunction: "linear",
? ? ? ? delay: 0?
? ? ? });
? ? ? obj.animation = animation;
? ? ? if(e.target.dataset.index == '2'){
? ? ? ? animation.translateX(x1).step();
? ? ? ? obj.setData({
? ? ? ? ? showArrow: false,
? ? ? ? ? asideFlag:'right',
? ? ? ? })
? ? ? }else{
? ? ? ? animation.translateX(x2).step();
? ? ? ? obj.setData({
? ? ? ? ? showArrow: true,
? ? ? ? ? asideFlag:'left'
? ? ? ? })
? ? ? }
? ? ? obj.setData({
? ? ? ? animationData1: animation.export()
? ? ? })
? ? }
? },
? // 顯示年月浮層
? showFloat: function(){
? ? this.setData({show: true,})
? },
? // 改變月的背景色并關閉浮層
? changeBgColor: function(e){
? ? // 恢復初始樣式
? ? for(var i = 0 ; i < this.data.days.length; i++){
? ? ? this.data.days[i].classInfo = []
? ? }
? ? this.setData({days:this.data.days})
? ? var cur = e.target.dataset.cur
? ? this.setData({
? ? ? current: cur,
? ? ? show:false,
? ? ? cur_year:this.data.nowYear,
? ? ? nowYear:new Date().getFullYear(),
? ? ? nowMonth:new Date().getMonth()+1,
? ? ? current1:new Date().getFullYear(),
? ? ? cur_month:cur,
? ? })
? ? this.setData({
? ? ? date:this.data.cur_year+'-'+(this.data.cur_month)+'-'+1
? ? })
? ? if(this.data.cur_year== this.data.nowYear && this.data.current == this.data.nowMonth){
? ? ? this.setData({cur_day:new Date().getDate()})
? ? }else{
? ? ? this.setData({cur_day:1})
? ? }
? ? this.calculateEmptyGrids(this.data.cur_year, cur);
? ? this.calculateDays(this.data.cur_year, cur);
? },
? // 改變年的背景色
? changeBgColor1: function(e){
? ? var cur = e.target.dataset.cur
? ? this.setData({
? ? ? current1: cur,
? ? ? nowYear:cur,
? ? })
? },
? // 點擊今天回到當日
? tapToday:function(){
? ? var date = new Date(); //當前日期
? ? var cur_day = date.getDate(); //當前日
? ? var cur_year = date.getFullYear(); //當前年份
? ? var cur_month = date.getMonth() + 1; //當前月份
? ? this.setData({
? ? ? date:cur_year+'-'+cur_month+'-'+1
? ? })
? ? this.calculateEmptyGrids(cur_year, cur_month);
? ? this.calculateDays(cur_year, cur_month);
? ? this.setData({
? ? ? cur_year: cur_year,
? ? ? cur_month: cur_month,
? ? ? cur_day: cur_day
? ? })
? },
? // 處理獲取的天的展示
? //獲取指定年的月份有多少天
? getThisMonthDays:function(year, month) {
? ? return new Date(year, month, 0).getDate();?
? },
? 獲取當前月中第一天是星期幾
? getFirstDayOfWeek:function(year, month) {
? ? return new Date(Date.UTC(year, month-1, 0)).getDay();?
? },
? // 獲取當月第一天之前的數組
? calculateEmptyGrids:function(year, month) {
? ? const firstDayOfWeek = this.getFirstDayOfWeek(year, month);?
? ? let empytGrids = [];
? ? if (firstDayOfWeek > 0) {
? ? ? for (var i = 0; i < firstDayOfWeek; i++) {
? ? ? ? empytGrids.push(i);
? ? ? }
? ? ? this.setData({
? ? ? ? hasEmptyGrid: true,
? ? ? ? empytGrids
? ? ? });
? ? } else {
? ? ? this.setData({
? ? ? ? hasEmptyGrid: false,
? ? ? ? empytGrids: []
? ? ? });
? ? }
? },
? // 獲取指定月的天數的數組
? calculateDays:function(year, month) {
? ? var that = this;
? ? var days = [];
? ? var thisMonthDays = this.getThisMonthDays(year, month);?
? ? this.getDateInfos(function(){
? ? ? for (var i = 0; i < that.data.dateInfos.length; i++) {
? ? ? ? days.push({
? ? ? ? ? day: i+1,
? ? ? ? ? choosed: false,
? ? ? ? ? classInfo: that.data.dateInfos[i].CalendarList
? ? ? ? });
? ? ? }
? ? ? that.setData({
? ? ? ? days:days
? ? ? });
? ? });
? },
? //點擊兩側箭頭的事件
? handleCalendar:function(e) { ?
? ? for(var i = 0 ; i < this.data.days.length; i++){
? ? ? this.data.days[i].classInfo = []
? ? }
? ? this.setData({days:this.data.days})
? ? var handle = e.currentTarget.dataset.handle;
? ? var cur_year = this.data.cur_year;
? ? var cur_month = this.data.cur_month;
? ? var nowYear = new Date().getFullYear();
? ? var nowMonth = new Date().getMonth()+1;
? ? var nowDay = new Date().getDate();
? ? if (handle === 'prev') {
? ? ? var newMonth = cur_month - 1;
? ? ? var newYear = cur_year;
? ? ? if (newMonth < 1) {
? ? ? ? newYear = cur_year - 1;
? ? ? ? newMonth = 12;
? ? ? }
? ? } else {
? ? ? var newMonth = cur_month + 1;
? ? ? var newYear = cur_year;
? ? ? if (newMonth > 12) {
? ? ? ? newYear = cur_year + 1;
? ? ? ? newMonth = 1;
? ? ? } ?
? ? }
? ? ? this.setData({
? ? ? ? date:newYear+'-'+newMonth+'-'+1
? ? ? })
? ? ? console.log(this.data.days)
? ? ? this.calculateEmptyGrids(newYear, newMonth);
? ? ? this.calculateDays(newYear, newMonth);
? ? ? this.setData({
? ? ? ? cur_year: newYear,
? ? ? ? cur_month: newMonth,
? ? ? });
? ? ? if(newYear==nowYear && newMonth == nowMonth){
? ? ? ? this.setData({cur_day:nowDay})
? ? ? }else{
? ? ? ? this.setData({cur_day:1})
? ? ? }
? },
? // 選擇每天的日期改變狀態(tài)
? tapDayItem:function(e) {
? ? var idx = e.currentTarget.dataset.idx;
? ? var days = this.data.days;
? ? for(var i = 0 ; i < days.length; i++){
? ? ? days[i].choosed = false;
? ? }
? ? days[ idx ].choosed = !days[ idx ].choosed;
? ? this.setData({
? ? ? days,
? ? });
? ? // 顯示課程
? ? this.setData({classContent:days[idx].classInfo})
? },
})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
驚云JS隨機排序程序隨機顯示信息-每次新聞顯示順序都不一樣...2007-11-11
本文給大家介紹js如何禁止查看網頁源代碼，并給大家分享了三種查看路徑的方法，本文給大家介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
JS循環(huán)遍歷ul中l(wèi)i的點擊事件給選中l(wèi)i添加css樣式(示例代碼)
對于一個ul中固定的li個數，當點擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應的另一個ul中l(wèi)i的顏色，怎么實現這個功能呢，下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧2023-07-07
理解Javascript_14_函數形式參數與arguments
在'執(zhí)行模型詳解'的'函數執(zhí)行環(huán)境'一節(jié)中對arguments有了些許的了解，那么讓我們深入的分析一下函數的形式參數與arguments的關系。2010-10-10
這篇文章主要為大家詳細介紹了bootstrap配合Masonry插件實現瀑布式布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。本文將詳細介紹TypeScript接口的相關知識。2017-03-03
JavaScript函數式編程(Functional Programming)組合函數(Composition)用法分析
這篇文章主要介紹了JavaScript函數式編程(Functional Programming)組合函數(Composition)用法,結合實例形式分析了javascript函數式編程中組合函數的概念、原理、用法及操作注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS/jquery實現一個網頁內同時調用多個倒計時的方法,涉及js與jQuery基于定時器的時間相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了javascript跨域資源共享的相關資料，感興趣的朋友可以參考一下2016-07-07
這篇文章主要介紹了JS獲取當前時間的實例代碼(昨天、今天、明天) ,需要的朋友可以參考下2018-11-11