微信小程序实现发布作业

效果图:

图片说明

小程序完整代码

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

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

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容