专栏首页极乐技术社区DEMO | 课程表也可以这么好玩

DEMO | 课程表也可以这么好玩

DEMO

界面预览

清晰漂亮的界面,很直观醒目哦~

目录结构

平台音乐和视频直播流数据来源于第三方网站,仅供学习交流使用,请勿用于商业用途。

.

├── App.vue

├── LICENSE

├── README.md

├── components

│ └── timetable

│ ├── icon.css

│ └── timetableBody.vue

├── main.js

├── manifest.json

├── pages

│ └── index

│ └── index.vue

├── pages.json

├── static│

├── guest.js

│ └── logo.png

├── store

│ ├── index.js

│ └── modules

│ └── timetable.js

└── uni.scss

课程表数据说明

[

// 第一周课表

[

// 周一课表

[

// 节次 1-2 课表

[

// 课程 1

{课程1},

// 冲突课程 2

{课程2}

],

// 节次 3-4 课表

[

{课程1}

],

// 节次 5-6 课表

[],

...

],

// 周二课表

[],

// 周三课表

[],

... ],

// 第二周课表

[],

// 第三周课表

[],

...

]

使用方法

static 目录下 guest.js为测试课表文件

  • 将 components 目录下 timetable文件夹拷贝至你所在的项目中
  • 将 store 目录下 modules 文件夹拷贝至相应文件夹中
  • 修改 store.js 文件添加以下代码

import Vue from 'vue'

import Vuex from 'vuex'

import timetable from '@/store/modules/timetable'

Vue.use(Vuex)

const store = new Vuex.Store({

modules: {

timetable

}

})

export default store

  • 修改 main.js 文件添加以下代码

import Vue from 'vue'

import App from './App'

import store from './store'

...

Vue.prototype.$store = store

...

const app = new Vue({

store,

...App,

})

app.$mount()

  • 引入组件,相关代码如下:

<template>

<view>

<!-- 课表主体 -->

<timetable-body></timetable-body>

...

</view>

</template>

<script>

import {

mapState,

mapGetters

} from 'vuex'

import {

timetableData

} from '../../static/guest.js'

// 课表主体

import timetableBody from '../../components/timetable/timetableBody.vue'

export default {

data() {

return {}

},

components: {

timetableBody

},

onLoad() {

// 设置开学时间

this.$store.commit('timetable/setStartDay', '2021/03/01 00:00:00')

// 初始化课表数据

this.$store.commit('timetable/setTimetableList', timetableData)

},

computed: {

...mapState('timetable', [

'showTimetableWeek',

'bgImage'

]),

...mapGetters('timetable', [

'originalWeekIndex',

'currentWeekIndex',

'weekWeekIndex'

])

},

watch: {

currentWeekIndex(newVal, oldVal) {

uni.setNavigationBarTitle({

title: `第${newVal + 1}周课表`

})

}

}

}

</script>

开源许可

本项目使用开源许可证 License GPLv3 ,代码开源仅供学习交流,禁止私用、商用,违者必究。

更新日志

Version 1.1.0

  1. F 使用 vuex
  2. U 课表色卡
  3. U 冲突课程显示方式
  4. A 课程详情卡片
  5. A 删除课程、课程置顶

Version 1.0.1

  1. A 周课表背景
  2. U 更换周课表切换配色
  3. U 优化体验

Version 1.0.0

  1. A 课程切换
  2. A 冲突课程折角
  3. A 周课表色卡切换

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:zguolee

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python编程思想(19):可变参数也可以这样玩

    很多编程语言都允许定义个数可变的参数,这样可以在调用函数时传入任意多个参数。Python当然也不例外,Python允许在形参前面添加一个星号(*),这样就意味着...

    蒙娜丽宁
  • 超级课程表APP爬虫,大学生都这么玩

    记得读大学时,看课程信息,查分数,看美女(嘘)都会使用超级课程表APP,当时这款APP非常火爆,今天,就带领大家回到大学,看看大学生都在干嘛? 该文涉及内容:

    罗罗攀
  • 张小龙发布2018微信计划 | QQ 推出「玩一玩」小游戏平台

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 张小龙现场“约战”跳一跳,发布2018微信全新计划 2017 年 1 月 15 日,微信公开课 PRO 版...

    极乐君
  • 【图片简历】Vue.js在线简历编辑器;生成图片简历(二)

    今天是春节之后上班第一天,许多同学们都会觉得有些不习惯吧?没关系,明天就是第二天,后天就是第三天了,慢慢的你就习惯了...跟大家开个玩笑哈,春节已过,让我们继续...

    web前端教室
  • 学生时代,我写过的那些“项目”

    今天,我看了一遍我在github上开源的“项目”,本来是想删掉这些开源demo的,因为github总是发邮件提醒,xx项目报出漏洞,让我修复,就是更新依赖的ja...

    Java艺术
  • 这个可以动态更新的课程表,我用数据透视表做的!

    前几天看了大海老师的《月历型报表》,一下子有了灵感,决定上手试一下。

    大海Power
  • 程序猿到底有多快乐?!

    不知道说到编程,大家是什么感受? 头大?还是跃跃欲试?又或是毫无波动? 最近知乎上的一个关于如何在编程中找到快乐的问题,引起了热议。 ? ? 到现在已经有一百...

    腾讯NEXT学位
  • 个人小程序已经开放注册,你准备好了么?

    小程序在发布前引起了异常轰动,业界十分看好,课时发布至今,貌似没什么动静,使用率并不是很高,但是不要紧,小程序已经可以让个人开发者也来注册,只要你拥有一个个人公...

    风间影月
  • 腾讯云大学大咖分享 | 小游戏联机对战引擎实践

    腾讯云大学本期直播课程邀请到了腾讯云Web前端工程师通过两个小游戏demo,讲解了小游戏联机对战引擎中帧同步和状态同步两种应用场景。「腾讯云大学」联合「云加社区...

    可可爱爱没有脑袋
  • 腾讯云大学大咖分享预告│如何轻松开发一款对战小游戏

    2018年微信小程序游戏内部测试开放后,微信小游戏的数量大幅增加。随着王者荣耀、刺激战场多款游戏风靡,大家对MOBA、FPS等游戏玩法逐渐熟知,玩家在线上邀请好...

    可可爱爱没有脑袋
  • 小程序将有直播新能力

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 微信公开课成都站:未来发展将关注商户如何获取更多收入和收益,小程序将有直播新能力 11月21日上午,在微信...

    极乐君
  • OpenAI发布可扩展的元学习算法Reptile | 论文+代码+Demo

    昨天,OpenAI发布了一种新型的可扩展元学习算法Reptile,还能在线试玩。 何为Reptile?难道是—— ? 咳咳严肃一点。 据OpenAI官方博客显示...

    量子位
  • ESP32接入腾讯云物联网开发平台

    这篇笔记记录采用 ESP32 接入腾讯云物联网开发平台的流程,同时给出了我的移植示例,方便其他想接入腾讯云物联网的朋友。

    twowinter
  • Java工程师学习指南(初级篇)

    最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好。原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写...

    黄小斜学Java
  • Java工程师学习指南(初级篇)

    最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好。原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写...

    Java技术江湖
  • Java工程师学习指南(初级篇)

    最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好。原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写...

    黄小斜学Java
  • Java工程师学习指南 初级篇

    最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好。原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写...

    黄小斜学Java
  • 《大胖 • 小课》- 玩玩多文件配多进度上传

    这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第4节-《玩玩多文件配多进度上传》

    zz_jesse
  • android软件开发之webView.addJavascriptInterface循环渐进【一】

    首先必要的啰嗦几句,这几天写VC写的累的要死,突然间不想再写想VC了,手里面有一个andriod的手机天天玩到半夜,却从来没有写过这方面的程序,真的是悲哀啊。所...

    xiangzhihong

扫码关注云+社区

领取腾讯云代金券