微信小程序日历课表源码

先附上效果图

这是一个可查当前月和下一月课程表的前端：现附上源码

.wxml

<!-- 月份 -->
<view class="date"><view style='width:20rpx;'><text class='white' wx:if="{{flag == 1}}" bindtap='minusMouth'>《</text></view><label class="white font17" style='padding-left:55rpx;padding-right:50rpx;'>{{year}}年{{mouth}}月</label><view style='width:20rpx;'><text class='white' wx:if="{{flag == 0}}" bindtap='plusMouth'>》</text></view>
</view>
<!-- 周 -->
<view class="header"><block wx:for="{{weeks}}" wx:key="index"><text class="weeks-item-text">{{item}}</text></block>
</view><!-- 日 -->
<view class="body-days"><!-- 点击本月其他日期 --><block wx:for="{{days}}" wx:key="index"><block wx:if="{{item !== nowDate }}"  wx:for-index="index"  wx:for-item='days'><view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}' data-index='{{index}}'  bindtap='selDate'><view class="days-item-text" style="background:{{sts == index ? '#F6747F' : ''}}" wx:if="{{item>0}}">{{item}}</view></view></block><!-- 点击本月当天日期 --><block wx:else><view class="days-item" data-date='{{year}}-{{mouth}}-{{item}}'  data-index='{{index}}' bindtap='selDate'><view class="days-item-text days-item-selected" wx:if="{{item>0}}">{{item}}</view></view></block></block>
</view><!-- 课程列表 -->
<scroll-view scrollX="true"><view class="fight-list"><view class="fight-list-block" wx:for="{{courselist}}" data-id="{{item.id}}" style='background:#3F4663; padding:15rpx;'><navigator url='/byjs_sun/pages/product/courseGoInfo/courseGoInfo?id={{item.id}}'>  <image class="fight-list-block-img" src="{{item.img}}"></image><text class='block font15 tc' style='color:#FFB400; letter-spacing:3rpx;'>{{item.title}}</text><text class='block white font13 tc' style='padding-bottom:0rpx;'>{{item.time}}</text></navigator></view></view>
</scroll-view>

var app = getApp();Page({data: {tabBarList: [],date: [],weeks: ['日', '一', '二', '三', '四', '五', '六'],days: [],year: 0,mouth: 0,nowDate: '',sts: -1,flag:0,},/*** 生命周期函数--监听页面加载*/onLoad: function(t) {var that = thisthat.dateData();var myDate = new Date(); //获取系统当前时间var nowDate = myDate.getDate();that.setData({nowDate: nowDate})console.log(myDate);   //系统当前时间console.log(nowDate);  //当前是本月几日// 课表数据var courselist=[{id:1,img:'../../../resource/images/icon/delet01.png',time:'19:00-20:00',title:'法国红酒快乐',},{id: 2,img: '../../../resource/images/icon/delet02.jpg',time: '19:00-20:00',title: '法国红酒快乐',},{id: 3,img: '../../../resource/images/icon/delet01.png',time: '19:00-20:00',title: '法国红酒快乐',},{id: 4,img: '../../../resource/images/icon/delet02.jpg',time: '19:00-20:00',title: '法国红酒快乐',},{id: 5,img: '../../../resource/images/icon/delet02.jpg',time: '19:00-20:00',title: '法国红酒快乐',}]that.setData({courselist: courselist,});console.log(courselist);//底部导航this.setData({tabBarList: app.globalData.tabbar4});var a = this;app.util.request({url: "entry/wxapp/url",cachetime: "0",success: function(t) {wx.setStorageSync("url", t.data), a.setData({url: t.data});}}),wx.setNavigationBarColor({frontColor: wx.getStorageSync("fontcolor"),backgroundColor: wx.getStorageSync("color"),animation: {duration: 0,timingFunc: "easeIn"}});},// 点击日期事件selDate: function (e) {var that = thisconsole.log('点击日期：',e.currentTarget.dataset.date);var index = e.currentTarget.dataset.index;    //获取下标that.setData({sts:index,});console.log('当前点击日期的下标:',index);console.log('当月数组：',this.data.days);  //当月数组},//用户点击增加月份plusMouth: function () {console.log("点击增加月份");var that = this;var date = new Date();var sysmouth = date.getMonth() + 1;  //系统当前月份console.log("系统当前月份：",sysmouth);var mouth;var year;mouth = this.data.mouth + 1console.log("点击后的月份：", mouth);year = this.data.yearthat.setData({flag: mouth - sysmouth})if (mouth > 12) {mouth = 1year++}this.updateDays(year, mouth)},//用户点击减少月份minusMouth: function () {console.log("点击减少月份");var date = new Date();var sysmouth = date.getMonth() + 1;console.log("系统当前月份：", sysmouth);var that = this;var mouth;var year;mouth = this.data.mouth - 1console.log("点击后的月份：", mouth);year = this.data.yearconsole.log(mouth)//当用户已点击到当前月的下一个月才能点击返回当月，此时点击显示 》，隐藏《 that.setData({flag: mouth - sysmouth})if (mouth < 1) {mouth = 12year--};this.updateDays(year, mouth)},dateData: function () {var date = new Date();var days = [];var year = date.getFullYear();var mouth = date.getMonth() + 1;this.updateDays(year, mouth)},updateDays: function (year, mouth) {var days = [];var dateDay, dateWeek;// 根据日期获取每个月有多少天var getDateDay = function (year, mouth) {return new Date(year, mouth, 0).getDate();}//根据日期获取这天是周几var getDateWeek = function (year, mouth) {return new Date(year, mouth - 1, 1).getDay();}dateDay = getDateDay(year, mouth)dateWeek = getDateWeek(year, mouth)console.log('当前月份总天数：',dateDay);// console.log('当前月份总周数：',dateWeek);//向数组中添加天 for (var index = 1; index <= dateDay; index++) {days.push(index)}//向数组中添加，一号之前应该空出的空格for (var index = 1; index <= dateWeek; index++) {days.unshift(0)}this.setData({days: days,year: year,mouth: mouth,yue:mouth,})console.log('当前月份日期：',days);},});

wxss

page {background: #313751;
}
.date {display: flex;flex-direction: row;justify-content: center;line-height: 4em;align-items: center;
}.direction {width: 40rpx;margin: 15rpx;height: 40rpx;
}.header {display: flex;flex-direction: row;color: #fff
}.weeks-item-text {width: 100%;font-size: 34rpx;text-align: center;
}.body-days {display: flex;flex-direction: row;flex-wrap: wrap;text-align: center;
}.days-item {width: 14.285%;display: flex;justify-content: center;align-content: center;
}.days-item-text {width: 20rpx;padding-top: 10rpx;padding-bottom:10rpx;margin-top: 15rpx;padding-left:20rpx;padding-right:30rpx;margin-left: 15rpx;border-radius: 5rpx;font-size: 26rpx; color: #fff;text-align: center;
}
/* 选中状态 */
.days-item-selected{background: #FDC500;
}/* 课程样式 */
.fight-list {padding-left: 20rpx;display: flex;margin-top: 35rpx;
}.fight-list-block {width: 320rpx;/* height: 400rpx; */margin-right: 30rpx;}.fight-list-block-img {width:320rpx;height: 330rpx;max-width: 320rpx;
}.fight-list-block-title {height: 62rpx;line-height: 62rpx;font-size: 28rpx;background: #3F4663;color: #fff;
}

微信小程序日历课表源码相关推荐

最新WordPress微信小程序社区论坛源码多端应用
WordPress多端应用 WordPress作为后端生成多端小程序.快应用及APP,可用于资讯.新闻.博客.企业官网等后端使用开源博客建站系统wordpress和微慕小程序开源版插件前端使用u ...
健康菜谱微信小程序+项目前后台源码（JavaSSM+Mysql）
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称健康菜谱微信小程序+项目前后台源码(JavaSSM+Mysql) 视频效果 ht ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
【增强版短视频去水印源码】去水印微信小程序+去水印软件源码
源码简介与安装说明: 2021增强版短视频去水印源码去水印微信小程序源码网站去水印软件源码安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apache php5.6 以上 ...
（已更新）【增强版短视频去水印源码】去水印微信小程序+去水印软件源码
源码简介与安装说明: 安装环境(需要材料):备案域名–服务器安装宝塔-安装 Nginx 或者 Apache php5.6 以上-安装 sg11 插件小程序已自带解析接口,支持全网主流短视频平台,搭建 ...
【微信小程序云工具箱源码】
工具箱源码,趣味工具微信小程序源码皮皮趣味小工具小程序源码,支持功能去水印,精选壁纸,图片压缩,文字生成二维码,图片加水印模拟来电,手持弹幕,掷骰子-等使用小工具,一个小程序有几十个功能. 微信小 ...
微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。
介绍: 1.naicha 2.xianhua 3.xingbake 4.zhubaoxiao 5.zhubaoxiao 6.majiangshangcheng 7.jiafang 8.huazhuan ...
2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码
2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...
数字信号 fft c源码_如何制作一个简单的人体动态识别微信小程序（附源码）
知乎小白第一次写专栏,还请多指教. 先放成果. GitHub源码: lrioxh/HAR-applet-of-Wechatgithub.com b站演示视频: 居然不需要服务器?!如何制作一个简单的 ...

微信小程序日历课表源码

微信小程序日历课表源码相关推荐

最新文章

热门文章

微信小程序 日历 课表 源码

微信小程序 日历 课表 源码相关推荐

最新文章

热门文章

微信小程序日历课表源码

微信小程序日历课表源码相关推荐