微信小程序实现发布作业
效果图:
图片说明
小程序完整代码
.wxml
<image src='{{image}}' class='img'></image>
<view class='bj'>{{bj}}</view>
<view class='date'>
<picker mode="date" value="{{date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1">
<view>
＜{{util.sub1(date1)}}＞ 日期
</view>
</picker>
</view>
<view class='text'>语文</view>
<block wx:for="{{lists}}" wx:key="{{index}}">
<input class='bk' data-id="{{index}}" placeholder="请输入" bindinput='bindKeyInput'></input>
</block>
<image src='{{addimage}}' class='addimg' bindtap='addList'></image>
<image src='{{delimage}}' class='addimg' bindtap='delList'></image>
<view class='text'>数学</view>
<block wx:for="{{lists1}}" wx:key="{{index}}">
<input class='bk' data-id="{{index}}" placeholder="请输入" bindinput='bindKeyInput1'></input>
</block>
<image src='{{addimage}}' class='addimg' bindtap='addList1'></image>
<image src='{{delimage}}' class='addimg' bindtap='delList1'></image>
<view class='text'>英语</view>
<block wx:for="{{lists2}}" wx:key="{{index}}">
<input class='bk' data-id="{{index}}" placeholder="请输入" bindinput='bindKeyInput2'></input>
</block>
<image src='{{addimage}}' class='addimg' bindtap='addList2'></image>
<image src='{{delimage}}' class='addimg' bindtap='delList2'></image>
<button class='btn'>发布作业</button>
<wxs module="util">
var sub1 = function(val) {
return val.substring(0, 10)
}
module.exports.sub1 = sub1;
</wxs>.wxss
.img {
width: 100%;
height: 125rpx;
margin-top: 20rpx;
z-index: 1;
}
.bj {
color: #907037;
position: absolute;
z-index: 2;
top: 75rpx;
left: 300rpx;
}
.text {
color: #00b8ee;
margin: 30rpx;
font-size: 30rpx;
}
.btn {
background-color: #00b8ee;
color: #fff;
width: 540rpx;
font-size: 30rpx;
margin-top: 30rpx;
}
.bk {
color: #00b8ee;
border: 2rpx solid #ccc;
padding: 10rpx;
margin: 30rpx;
border-color: #00b8ee;
font-size:30rpx;
}
.addimg {
width: 50rpx;
height: 50rpx;
margin-left: 30rpx;
}
.date {
padding-top: 20rpx;
padding-bottom: 20rpx;
text-align: center;
color: #fff;
background-color: #00b8ee;
}.js
var util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
image: "../../images/zybg.jpg",
addimage: '../../images/bt02.png',
delimage: '../../images/bt01.png',
bj: '三年(2)班',
lists: [{}],
lists1: [{}],
lists2: [{}],
date1: '',
},
changeDate1(e) {
var that = this;
that.setData({
date1: e.detail.value
});
},
addList: function() {
var lists = this.data.lists;
var newData = {};
lists.push(newData); //实质是添加lists数组内容，使for循环多一次
this.setData({
lists: lists,
})
},
delList: function() {
var lists = this.data.lists;
lists.pop(); //实质是删除lists数组内容，使for循环少一次
this.setData({
lists: lists,
})
},
addList1: function() {
var lists1 = this.data.lists1;
var newData = {};
lists1.push(newData); //实质是添加lists数组内容，使for循环多一次
this.setData({
lists1: lists1,
})
},
delList1: function() {
var lists1 = this.data.lists1;
lists1.pop(); //实质是删除lists数组内容，使for循环少一次
this.setData({
lists1: lists1,
})
},
addList2: function() {
var lists2 = this.data.lists2;
var newData = {};
lists2.push(newData); //实质是添加lists数组内容，使for循环多一次
this.setData({
lists2: lists2,
})
},
delList2: function() {
var lists2 = this.data.lists2;
lists2.pop(); //实质是删除lists数组内容，使for循环少一次
this.setData({
lists2: lists2,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
var that = this;
// 获取当天时间
var todaytime = util.formatTime(new Date());
that.setData({
date1: todaytime
});
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
}).util
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
小礼物走一走 or 点赞
这是一个有质量，有态度的公众号
喜欢本文的朋友们
欢迎长按下图关注订阅号
收看更多精彩内容
