前言

感謝! 承蒙關照~微信小程序實現課程表實例

效果圖:

小程序代碼如下

wxml:

{{bj}} {{name}}

8:00

語文

語文

數學

數學

語文

9:00

語文

語文

數學

數學

語文

10:00

語文

語文

數學

數學

語文

11:00

語文

語文

數學

數學

語文

12:00

午休

14:00

語文

語文

數學

數學

語文

15:00

語文

語文

數學

數學

語文

16:00

語文

語文

數學

數學

語文

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

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

喜歡本文的朋友們

歡迎長按下圖關注訂閱號

收看更多精彩內容

總結

以上是生活随笔為你收集整理的微信小程序制作课程表_微信小程序实现课程表实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。