微信小程序實現發佈作業
效果圖:
圖片說明
小程序完整代碼
.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 點贊
這是一個有質量，有態度的公衆號
喜歡本文的朋友們
歡迎長按下圖關注訂閱號
收看更多精彩內容
