前言

感谢! 承蒙关照~微信小程序实现课程表实例

效果图:

小程序代码如下

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

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

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容