微信小程序實現課程表實例

前言

感謝! 承蒙關照~

微信小程序實現課程表實例

效果圖:

小程序代碼如下

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 點贊

這是一個有質量，有態度的公眾號

喜歡本文的朋友們

歡迎長按下圖關注訂閱號

收看更多精彩內容