微信小程序之课表展示

最新推荐文章于 2024-02-07 12:52:20 发布
最新推荐文章于 2024-02-07 12:52:20 发布
阅读量4k 收藏 89
点赞数 34
分类专栏： 微信小程序 文章标签： 微信小程序 我的课表 课表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43789261/article/details/97519109
版权

微信小程序之课表


不知道说些什么。。。

页面展示图片

在这里插入图片描述在这里插入图片描述

代码片段

本来准备贴完整代码的，过长，看的头疼，于是。。。

// wxml
<view class='content'>
  <view class='title_right'>
    <view class="tab-item " data-current="0" bindtap="swichNav">
      <view class=" {{currentTab==0 ? 'onLeft' : ''}}">{{tab0}}</view>
    </view>
    <view class="tab-item " data-current="1" bindtap="swichNav">
      <view class=" {{currentTab==1 ? 'onRight' : ''}}">{{tab1}}</view>
    </view>
  </view>
  <swiper class="swiper" style='width:100%;height:100%;'>
    <swiper-item catchtouchmove="stopTouchMove" wx:if='{{currentTab == 1}}'>
      <view class='title' bindtap='clickHide'>
        <view class='title_left'>
          <view class='btn btn_'></view>
          <view class='week' catchtap='clickShow'>
            第7周
            <image></image>
          </view>
          <view class='btn'></view>
        </view>
      </view>
      <scroll-view scroll-x="true" class='show' wx:if='{{show}}'>
        <view class='show_week' wx:for="{{weekList}}" wx:key="index">{{item}}</view>
      </scroll-view>
      <view wx:if='{{type == 0}}'>
        <view class="top">
          <view class='left'>节\周</view>
          <view wx:for="{{['一','二','三','四','五','六','日']}}" wx:key="index" class="top-text">
            周{{item}}
          </view>
        </view>
        <scroll-view scroll-y="true" class="scroll" style='height:{{windowHeight-110}}px;' bindtap='clickHide'>
          <view style="width:100%;display:flex;">
            <view style="background-color:#EFEFF4;color:#333;">
              <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14]}}" wx:key="index" class="left" style='height:50px'>
                {{item}}
              </view>
            </view>
            <view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12,13,14]}}" wx:key="index">
              <view style="width:100%;margin-top:{{(index+1)*50-0.8}}px;  position: absolute;border-bottom:1rpx solid lightgray;">
              </view>
            </view>
            <!--课表-->
            <view wx:for="{{wlist}}" wx:key="index">
              <view class="flex-item kcb-item" bindtap="showCardView" data-wlist='{{item}}' data-index='{{index}}' style="margin-left:{{(item.xqj-1)*98}}rpx;margin-top:{{(item.skjc-1)*50+2}}px;height:{{item.skcd*50-5}}px;background-color:{{item.color == '0'?'#FCB8AF':(item.color == '1'?'#81D2FC':'#F8C77A')}}">
                <view class="smalltext" style='-webkit-line-clamp: {{item.skcd == "3"?"4":(item.skcd == "4"?"6":"2")}};'>{{item.kcm}}</view>
                <view class='classRoom'>({{item.jsbh == ''?'--':item.jsbh}})</view>
                <view class='logo' style="background-color:{{item.color == '0'?'#FA7666':(item.color == '1'?'#3CB9FB':'#F39C13')}}">{{item.color == '0'?'必':(item.color == '1'?'选':'其')}}</view>
                <!-- xqj代表星期几上课，sksj是上课时间，skcd上课长度，kcm课程名，jsbh教室编号 -->
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view wx:else bindtap='clickHide'>
        <scroll-view  scroll-y="true" style='height:{{(windowHeight-60)}}px;background-color:#EFEFF4;'>
          <view class='teacher' wx:for='{{wlist}}'>
            <view class='tch_top'>
              周二 第6,7节次 15:00~17:40
            </view>
            <view class='tch_content'>
              <view class='tch_kcm'>
                天然药物化学实验
                <view class='tch_type'>辅</view>
              </view>
              <view class='tch_'>上课班级：天然化学药物理论讲解实验操作实践(一)1384384，天然化学药物理论讲解2384384</view>
              <view class='tch_'>
                选课人数：50人
                <image class='img' bindtap='studentList'></image>
              </view>
              <view class='tch_'>上课周数：1-16周</view>
              <view class='tch_'>授课教师：陈江，李铭</view>
              <view class='tch_skjs'>教A-209</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </swiper-item>
  </swiper>
</view>

<view class="drawer_screen" data-statu="close" wx:if="{{showModalStatus}}" catchtouchmove='preventTouchMove' bindtap='hideModal'></view>

<view class="drawer_box" wx:if="{{showModalStatus}}" catchtouchmove='preventTouchMove'>

  <view class="do_drawer_content" style="color:#FFF;background-color:{{cardView.color == '0'?'#FCB8AF':(cardView.color == '1'?'#81D2FC':'#F8C77A')}}">
    <view class='drawer_top'>
      <text>{{cardView.kcm}}</text>
    </view>
    <view>
      <view class='noidle-item'>
        <label class='noidle-item-prefix'>教师：</label>
        <label class='noidle-item-content'>江峰</label>
      </view>
      <view class='noidle-item'>
        <label class='noidle-item-prefix'>教室：</label>
        <label class='noidle-item-content'>{{cardView.jsbh}}</label>
      </view>
      <view class='noidle-item'>
        <label class='noidle-item-prefix'>日期：</label>
        <label class='noidle-item-content'>2019.10.26 周一</label>
      </view>
      <view class='noidle-item'>
        <label class='noidle-item-prefix'>节次：</label>
        <label class='noidle-item-content'>第1,2,3,4节次 (08:30~09:45)</label>
      </view>
    </view>
    <view class='drawer_logo' style="background-color:{{cardView.color == '0'?'#FA7666':(cardView.color == '1'?'#3CB9FB':'#F39C13')}}">{{cardView.color == '0'?'必':(cardView.color == '1'?'选':'其')}}</view>
  </view>
</view>

page{
  width: 100%;
  height: 100%;
}
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 按周显示课表(学生) */
.title{
  width: 100%;
  height: 60px;
  position: relative
}
.title_left{
  width: 280rpx;
  height:30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 30rpx;
}
.title_left > view{
  display: inline-block;
}
.week{
  font-size: 32rpx;
  line-height: 18rpx;
}
.week > image{
  width: 0;
  height: 0;
}
.btn{
  width: 40rpx;
  height: 40rpx;
  color: #FFF;
  background-color: #3CB9FB;
  border-radius: 50%;
}
.show{
  width: 100%;
  height: 60px;
  position: absolute;
  top: 60px; 
  z-index: 101;
  display: flex;
  align-items: center;
  background-color: #FFF;
  border-top: 1rpx solid #EFEFF4;
  overflow-x: auto;
  white-space:nowrap;
  overflow:hidden;
}
.show_week{
  line-height: 60px;
  display: inline-block;
  padding-left: 70rpx;
}
.title_right{
  color: #44BCFB;
  font-size: 32rpx;
  text-align: center;
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  border: 1rpx solid #44BCFB;
  border-radius: 10rpx;
  z-index: 102;
}
.tab-item{
  width: 80rpx;
  height: 30px;
  display: inline-block;
  box-sizing: content-box;
}
.tab-item > view{
  line-height: 30px;
}
.onLeft{
  width: 100%;
  height: 100%;
  color: #FFF;
  background-color: #44BCFB;
  border-top-left-radius: 8rpx;
  border-bottom-left-radius: 8rpx;
}
.onRight{
  width: 100%;
  height: 100%;
  color: #FFF;
  background-color: #44BCFB;
  border-top-right-radius: 8rpx;
  border-bottom-right-radius: 8rpx;
}
.top{
  display: flex;
  height: 50px;
  flex-direction: row;
  background-color: #EFEFF4;
  color: #333;
}
.top-text{
  width: 100rpx;
  height: 100rpx;
  font-size: 30rpx;
  justify-content: center;
  display: flex;
  align-items: center;
}
.left{
  width: 70rpx;
  font-size: 9pt;
  justify-content: center;
  display: flex;
  align-items: center;
}
.flex-item {
  width: 90rpx;
  height: 100px;
}
.kcb-item {
  position: absolute;
  justify-content: center;
  display: flex;
  border-radius: 5px;
}
.smalltext {
  position: absolute;
  top: 40rpx;
  left: 8rpx;
  font-size: 26rpx;
  color: #fff;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical; 
}
.classRoom{
  position: absolute;
  bottom: 10rpx;
  font-size: 8pt;
  color: #fff;
  padding-left: 2px;
}
.logo{
  color: #FFF;
  font-size: 8pt;
  text-align: center;
  line-height: 30rpx;
  position: absolute;
  top: 0;
  right: 0;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}

// js
Page({
  data: {
    tab0: "日",
    tab1: "周",
    type: 0,  //0是学生，1是老师
    currentTab: 1, //0是日课程表，1是周课程表
    show: false,
    dayTab: 0,
    weekList: ['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
    day: ['10.25', '10.26', '10.27', '10.28', '10.29', '10.30', '10.31',],
    wlist: [
      { "xqj": 4, "skjc": 2, "skcd": 3, "kcm": "高等数学", "jsbh": "A308", "color": 1 },
    ],
    dayList: [
      { "jcxx": "第1,2节次 08:00~09:45", "kcm": "大学英语", "skls": "陈江", "jsbh": "教A520", "kkyx": "外语学院", "xsrs": "88", "skbj": "外语系521", "type": 0 },
    ]
  },

  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
        })
      },
    })
  },

  clickShow: function (e) {
    var that = this;
    that.setData({
      show: !that.data.show,
    })
  },

  clickHide: function (e) {
    var that = this
    that.setData({
      show: false
    })
  },

  swichNav: function (e) {
    this.clickHide();
    if (this.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.currentTarget.dataset.current,
      })
    }
  },

  stopTouchMove: function () {
    return false;
  },

  dayCheck: function (e) {
    var that = this;
    if (that.data.dayTab === e.currentTarget.dataset.daytab) {
      return false;
    } else {
      that.setData({
        dayTab: e.currentTarget.dataset.daytab,
      })
    }
  },

  swiperChange: function (e) {
    var self = this
    self.setData({
      dayTab: e.detail.current,
    })
  },

  showCardView: function (e) {
    let cardView = {
      kcm: e.currentTarget.dataset.wlist.kcm,
      color: e.currentTarget.dataset.wlist.color,
      jsbh: e.currentTarget.dataset.wlist.jsbh,
    }
    this.setData({
      cardView: cardView
    })
    this.util("open");
  },

  hideModal() {
    this.util("close");
  },

  util: function (currentStatu) {
    var animation = wx.createAnimation({
      duration: 100, //动画时长 
      timingFunction: "linear", //线性 
      delay: 0 //0则不延迟 
    });
    this.animation = animation;
    animation.opacity(0).rotateX(-100).step();
    this.setData({
      animationData: animation.export()
    })
    setTimeout(function () {
      animation.opacity(1).rotateX(0).step();
      this.setData({
        animationData: animation
      })

      if (currentStatu == "close") {
        this.setData({
          showModalStatus: false
        });
      }
    }.bind(this), 200)
    if (currentStatu == "open") {
      this.setData({
        showModalStatus: true
      });
    }
  },
})

源码地址https://download.csdn.net/download/weixin_43789261/11438507
PS：评论区有度盘链接，如有帮助一键三连

҉遗҉忘҉
关注
  • 34
    点赞
  • 踩
  • 89
    收藏
    觉得还不错? 一键收藏
  • 72
    评论
专栏目录
微信小程序 - 超级课程表
01-27
微信小程序 - 超级课程表 说明： 该项目为本人的毕业设计，主体功能参考一款校园app-。项目包括了四个模块，分别是个人主页、课程查询、成绩查询和树洞，其中，在个人主页输入账号（即学号）密码进行登录的时候，后台会模拟登录教务系统，以校验正确性，并返回登录结果； 在已登录的状态下可以进入课程查询和成绩查询模块，课程和成绩信息都是使用该账号模拟登录教务系统抓取的；树洞模块是调用api访问数据库进行树洞和评论的发表、删除操作。 服务接口： 后端基于PHP的CodeIgniter框架提供API，以实现以下功能： 模拟登陆教务系统验证学号密码正确性 从教务系统抓取个人课表 从教务系统抓取个人成绩 操作本地数据库发表、删除树洞及评论 系统用例图： 登录时序图： 课程查询时序图： 成绩查询时序图： 浏览树洞时序图： 发表评论时序图： 个人主页界面： 课程查询界面： 成绩查询界面： 树洞界面： 发表树洞界
自制课程表小程序
m0_45369418的博客
09-04 3381
自制微信课程表小程序（0基础实现从入门到发布，踩过的坑都告诉你）
微信小程序--周历--课程表
qq_41763797的博客
05-02 1万+
最近需要一个周历课程表，无奈在网上找了半天都没找到，只能自己动手上代码//wxml//我在网上找了一个小程序的月历，在其基础上进行的更改，并增加了左右滑动切换日历的事件&lt;view bindtouchstart="touchStart" bindtouchend="touchEnd"&gt;  &lt;view class='box1' style='width: {{ sysW * 7 ...
支持多校 微信课表小程序源码 排课小程序源码 支持导入课表 情侣课表 背景设置
最新发布
qq_42786036的博客
02-07 392
练手Lab课程表小程序源码是一个基于thinkphp系统进行开发的前后端分离系统。源码功能介绍1、情侣功能2、情侣间留言3、情侣间互相设置课程表背景4、自己日、周课程表背景设置5、教务系统课程表导入6、导入别人分享的课表7、导入别人分享的单课8、多校支持9、首页顶部氛围设置（管理员设置，节日氛围）环境要求1、服务端：php+mysql（基于FastAdmin）2、小程序端：原生+colorui准备工作1、需自备服务器和备案过的域名。
小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现
weixin_40797306的博客
07-30 1万+
前言 四个月前提起兴趣发表的这篇博客，两天劲头就过了，写的也是乱七八糟的，这次想真正的把博客建立起来，第一步要做的事情就是把这篇博客好好的改善一下，给过去一个好的交代，给未来一个好的开始。万事开头难，这次一定坚持下去。 一、功能演示说明 先详细的展示功能图片以及功能说明，以确保大家看到这里能确定功能是否是自己想要的。这是一个可以实现课程表、食谱等一些功能的周日...
微信小程序校园活动管理系统-JAVA【数据库设计、源码、开题报告】
laowang8的博客
11-22 1938
活动管理是中职学生素质教育的重要途径及有效方式，特别是对于一个院校的校园文化建设、校风学风建设和学生综合素质方面的提高至关重要t叫"。良好的学生活动组织可以更好地调动学生参与活动，让学生展示自己的能力，提升自我的综合素质。良好的学生风貌体现的是一个校园的教育和管理水平。对于强调操作技能为主的职业学校的学生而言,特别是有不同职业发展需求及不同个性的学生，高效的组织能力同样至关重要。
应用实战｜微信小程序开发示例之Super课表
NimbleX_的博客
09-15 1166
此示例提供了使用 MemFire Cloud 构建一个课表的小程序的步骤。小程序用到的MemFire Cloud的功能包括：云数据库：存储小程序数据表的信息。用户验证：小程序使用MemFire Cloud提供的用户认证的API接口，快速完成用户注册登录操作。云存储：存储小程序的注册用户上传的头像。行级安全策略：采用RLS策略来限制用户访问行为，用户可以修改个人信息，上传个人头像。即时API：创建数据表时会自动生成 API。
微信小程序：简易课程表模板
qq_56966336的博客
09-14 894
前段时间，接了一些项目订单，其中有一个内容要绘制一个课表界面，因为他们要查重，就自己简单的写了一下，界面不是很花里花哨，但功能都具备，需要的自取，且我会详细的分析代码，提供一个实现思路，大家一起进步。：我实现的方式主要是通过全部铺满然后判断具体哪些课需要显示，如果各位友友有更好的实现思路也可以在评论中分享，一起学习下。好久没有更新文章了，从毕业到现在已经开始上班几个月啦，今天有点无聊摸会鱼，上班写个简单的文章证明自己还活着哈哈哈，。我在考虑要不要将课程表的增删改查功能也贴出来，
微信小程序实现课程表
苏苏就是小苏苏的博客
08-12 1万+
微信小程序实现一个可爱的课程表
微信课程表小程序（0基础教你用，从入门到发布）
热门推荐
Javascript_tsj的博客
03-10 2万+
课程表微信小程序，0基础从入门到发布
简单的课程表小程序（仿超级课程表），加入自定义背景功能
lianshoulab的博客
12-30 4501
总览： 借鉴了市面上存在的几个课程表软件，因为功能太繁杂，于是自己尝试做了个课程表小程序并开源，目前已经支持添加删除课程表功能，还加入了日课表 总体来说感觉是一个相当简洁的课程表，后端基于fastadmin开发 gif演示： 在底部会放上gitee的开源地址 最近总感觉目前的界面过于简洁了，不满足我这个体面人的需求，故加入自定义课程表背景的的功能。 新增页面： 效果： 需要在mine.js里面加入一个入口： { name: "设置课表背
微信小程序-课程表小程序
08-07
微吉风 在经历 BBS、Wiki、Blog、公众号的失败后，我转身投入了小程序。或许，这是在校最后一次干自己喜欢的事了。 功能 [x] 课表（目前只支持当前学期） [x] 校园卡（余额，消费记录） [ ] …… 当 XX 转型主打聊天交友后，我再也没用过课表软件。 我只需要课表，其他的功能依爱好和空闲时间开发。 可能某天就弃坑了。 截图 图示为最新版本。 更新日志 v0.2.1 (2017-07-07) 修复 未在教学周期内时课程不显示 修复 存在连上的课程时导致课表无法显示 v0.2.0 (2017-06-11) 更新 优化了外观样式 更新 重构了程序 新增 校园卡服务，包括余额和消费记录查询 新增 获取用户微信资料，显示头像和昵称 新增 多语言，当前支持简体中文和英文 v0.1.0 (2017-04-01) 项目发布 文档 详见 Wiki。 许可 WTFPL.
微信小程序课表小程序项目源码下载WeApp-timeTable-master.zip
09-25
微信小程序课表小程序项目源码下载WeApp-timeTable-master.zip
课程表小程序demo
03-04
这是一个课程表小程序demo，内容很简单，自己手写代码
微信小程序课程表，漂亮简洁大方。
01-21
TimeTable 微信小程序课程表，漂亮简洁大方。 博客
微信小程序-微信小程序开发实践-课程表
08-05
wx-schedule > 微信小程序-课程表（demo） 涵盖学习内容： 小程序登录流程，包括获取用户敏感数据等 设置二级页面的原生tabbar 封装http请求，页面流程和布局设计 简单实现日历功能 引入WeUI等
微信小程序原生实现课程表
09-14
微信小程序原生实现课程表
微信小程序（原生）课程表
12-03
微信小程序（原生）实现课程表，支持课长为1-6节课，点击展示当前课表内容弹框。
微信小程序源码：高校微信小程序，集课表查询、成绩查询、电费查询、图书查询等功能于一体
08-01
pages/index/index 默认首页 ...pages/index/feature 功能列表 pages/books/search 图书检索 ...贝壳小盒子Wechat微信小程序，高校微信小程序，集课表查询、成绩查询、电费查询、图书查询等功能于一体。
制作一个微信小程序大学课程表
05-27
好的，制作微信小程序大学课程表的基本流程如下： 1. 准备课程表数据：将每个学期的课程表数据录入数据库或Excel中，包括课程名称、授课教师、上课时间、上课地点等信息。 2. 设计小程序界面：根据实际需求设计小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 72
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值