微信小程序--周历--课程表

最新推荐文章于 2025-06-14 16:29:26 发布

原创

最新推荐文章于 2025-06-14 16:29:26 发布 · 1.1w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #周历 #课程表 #左右切换 #微信

本文介绍了作者如何在找不到合适的周历课程表后，自己动手在微信小程序上开发这一功能。通过修改网上找到的月历小程序代码，增加了左右滑动切换日历的交互，实现了符合需求的课程表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要一个周历课程表，无奈在网上找了半天都没找到，只能自己动手

上代码

//wxml

//我在网上找了一个小程序的月历，在其基础上进行的更改，并增加了左右滑动切换日历的事件

 
   
 
 
    < 
    view 
    bindtouchstart= 
    "touchStart" 
    bindtouchend= 
    "touchEnd"> 
   

 
      < 
    view 
    class= 
    'box1' 
    style= 
    'width: { 
     { sysW * 7 }}px'>< 
    span 
    bindtap= 
    "last">上 
    </ 
    span 
    >< 
    span 
    bindtap= 
    "next">下 
    </ 
    span 
    > 
   
 
        < 
    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= 
    'width: { 
     { sysW }}px; height: { 
     { sysW }}px; line-height: { 
     { sysW }}px;' 
    class= 
    '{ 
     { item == getDate ? "dateOn" : ""}} { 
     {font==1?item>7?"font-color":"":font==2?item<7?"font-color":"":"" }}'>{ 
    { item }} 
    </ 
    view 
    > 
   

          
    </ 
    block 
    > 
   
 
      </ 
    view 
    > 
   
 
   </view> 
  

//wxss

 
  .box1 
  .dateBox{ 
   
  width: 
  100%; 
 
  height: 
  50px; 
 
  line-height: 
  50px; 
 
  text-align: 
  center; 
 
  margin-top: 
  20px; 
 
  font-size: 
  40 
  rpx; 
 
   } 
 
  .box1{ 
   
  display: 
  flex; 
 
  flex-wrap: 
  wrap; 
 
  margin: 
  0 
  auto; 
 
   } 
 
  .box1> 
  view{