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

前言

感谢! 承蒙关照~

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

效果图:

小程序代码如下

wxml:

<image src='{{image}}' class='img'></image>
<view class='bj'>{{bj}} {{name}}</view>
<view class="container">
  <view class="tr">
    <view class="trd th1">
      <image src='/images/title01.png'></image>
    </view>
    <view class="trd th2">
      <image src='/images/title02.png'></image>
    </view>
    <view class="trd th3">
      <image src='/images/title03.png'></image>
    </view>
    <view class="trd th4">
      <image src='/images/title04.png'></image>
    </view>
    <view class="trd th5">
      <image src='/images/title05.png'></image>
    </view>
    <view class="trd th6">
      <image src='/images/title06.png'></image>
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      8:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      9:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      10:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      11:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>


  <view class="tr">
    <view class="trdwuxiu th1wuxiu">
      12:00
      <text class='wuxiu'>午休</text>
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      14:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      15:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>

  <view class="tr">
    <view class="trd th1">
      16:00
    </view>
    <view class="trd th2">
      语文
    </view>
    <view class="trd th3">
      语文
    </view>
    <view class="trd th4">
      数学
    </view>
    <view class="trd th5">
      数学
    </view>
    <view class="trd th6">
      语文
    </view>
  </view>


</view>

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 点赞

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

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容