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

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

摘要生成于 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{
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值