微信小程序实现课程表实例

本是古典何须时尚 2021-07-24 23:04 1120阅读 0赞

![format_png][]

## 前言 ##

感谢! 承蒙关照~

> 微信小程序实现课程表实例

效果图:

![format_png 1][]

## 小程序代码如下 ##

wxml:

wxss:

.img {
      width: 100%;
      height: 1180rpx;
      margin-top: 15rpx;
      z-index: 1;
    }
    
    .bj {
      color: #907037;
      position: absolute;
      z-index: 2;
      top: 100rpx;
      left: 240rpx;
    }
    
    /* 课表 */
    
    .container {
      position: absolute;
      top: 10rpx;
      left: 20rpx;
      z-index: 3;
    }
    
    .tr {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 10rpx;
      margin-left: 48rpx;
    }
    
    .trd {
      padding: 10rpx 0rpx 0rpx 0rpx;
      width: 15%;
      text-align: center;
      color: #989798;
      font-size: 30rpx;
    }
    
    .trdwuxiu {
      padding: 10rpx 0rpx 0rpx 0rpx;
      width: 100%;
      color: #989798;
      font-size: 30rpx;
    }
    
    .wuxiu {
      text-align: center;
      margin-left: 210rpx;
    }
    
    .th1 {
      background-color: #a0d1f9;
      /* padding-bottom: 10rpx; */
    }
    
    .th1wuxiu {
      background-color: #a0d1f9;
      padding-bottom: 10rpx;
      padding-left: 10rpx;
    }
    
    .tr image {
      width: 100rpx;
      height: 50rpx;
    }
    
    .th2 {
      background-color: #abeecd;
      padding-bottom: 10rpx;
    }
    
    .th3 {
      background-color: #a0d1f9;
      padding-bottom: 10rpx;
    }
    
    .th4 {
      background-color: #d6cede;
      padding-bottom: 10rpx;
    }
    
    .th5 {
      background-color: #f9e68a;
      padding-bottom: 10rpx;
    }
    
    .th6 {
      background-color: #ddf78c;
      padding-bottom: 10rpx;
    }
    
    .th, .td {
      padding: 10px;
      text-align: center;
      width: 100%;
    }

json:

{
      "navigationBarTitleText": "我的课表"
    }

js:

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        image: "../../images/kbbg.jpg",
        bj: '三年(2)班',
        name: "黄晓明",
        sch_listData: [],
        dateArray: [],
        msg: '数据',
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> https://www.jianshu.com/u/c785ece603d1

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

**这是一个有质量，有态度的公众号**

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

![format_png 2][]

[format_png]: /images/20210724/75479ff71f0649a489428734c2b436c4.png
[format_png 1]: /images/20210724/aa6108c6db244a2499ee024118bd56c8.png
[format_png 2]: /images/20210724/b8d7fdd4406a4b03b7f3f29f35b80610.png