• 目的

实现允许编辑的【课程表】。

• 效果图

• wxml代码

<view class="mainPage">
  <view class="hearderView">
    <van-icon class="arrow" bindtap="goHome" name="notes-o" size="20" />
    <text class="tipText" style="font-size: 12px;width: 85%;">滑动查看完整课表，长按可以编辑保存。</text>
  </view>
  <scroll-view scroll-x="true" scroll-y="true" style="height: {{validHeight-50}}px;">
    <view class="table">
      <view class="tr h">
        <view class="th h1"></view>
        <view class="th" wx:for="{{[0,1,2,3,4,5,6]}}" wx:key="weekIndex" wx:for-item="weekItem">{{m1.getWeekday(weekItem)}}</view>
      </view>
      <block wx:for="{{kebiao.detail}}" wx:key="index" wx:for-item="item">
        <view class="tr">
          <view class="td c1">
            <text>第</text><text>{{item.no+1}}</text><text>节</text>
          </view>
          <view class="td c" wx:for="{{item.ke}}" wx:key="index2" wx:for-item="item2" bindlongpress="longpress" data-no="{{item.no}}" data-day="{{index}}">
            <text>{{item2.name}}</text>
            <text>{{item2.time}}</text>
            <text>{{item2.classroom}}</text>
            <text>{{item2.teacher}}</text>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
  <view class="botView" style="width: 100%;height: {{botHeight}}px;"></view>
</view>

<van-popup show="{{ show }}" position="bottom" custom-style="height: 230px;" bind:close="onClose">
  <view class="popView">
    <view class="popHeader">
      <van-icon class="arrow" bindtap="onClose" name="close" size="20" color="Red" />
      <text class="tipText">{{m1.getWeekday(currentKe.day)}} 第{{currentKe.no+1}}节</text>
      <van-icon class="arrow" bindtap="confirmEdit" name="passed" size="20" color="#1989fa" />
    </view>
    <view class="kebiaoLine">
      <text class="label"><text class="kebiaoNo" space="ensp">{{item.no}} </text>课程名</text>
      <input bindinput="inputText" id="name" value="{{currentKe.ke.name}}"></input>
    </view>
    <view class="kebiaoLine">
      <text class="label">时间</text>
      <input bindinput="inputText" id="time" value="{{currentKe.ke.time}}"></input>
    </view>
    <view class="kebiaoLine">
      <text class="label">教室</text>
      <input bindinput="inputText" id="classroom" value="{{currentKe.ke.classroom}}"></input>
    </view>
    <view class="kebiaoLine">
      <text class="label">老师</text>
      <input bindinput="inputText" id="teacher" value="{{currentKe.ke.teacher}}"></input>
    </view>
  </view>
</van-popup>

<wxs module="m1">
  function getWeekday(index) {
    switch (index) {
      case 0:
        return "周一"
      case 1:
        return "周二"
      case 2:
        return "周三"
      case 3:
        return "周四"
      case 4:
        return "周五"
      case 5:
        return "周六"
      case 6:
        return "周日"
      default:
        return ""
    }
  }
  module.exports.getWeekday = getWeekday
</wxs>

• js代码

data: {
  kebiao: {
        totalWeek: 16,
    currentWeek: 11,
        currentKe:{day:-1,no:-1,ke:{name:'',time:'',classroom:'',teacher:''}},
        detail: [
            { 
               no:0,
               ke:[{name:"计算机组成与结构",time:"1-16周",classroom:"信工楼E536",teacher:"徐苏"},
                   {name:"",time:"",classroom:"",teacher:""},
                   {name:"计算机组成与结构",time:"1-16周",classroom:"信工楼E536",teacher:"徐苏"},
                   {name:"",time:"",classroom:"",teacher:""},
                   {name:"嵌入式系统",time:"1-16单周",classroom:"信工楼E536",teacher:"周聪"},
                   {name:"",time:"",classroom:"",teacher:""},
                   {name:"党课",time:"1-13单周",classroom:"党校B302",teacher:"张三"}]
             },
      },
},

• 使用Vant组件

van-popup、van-icon

• 体验小程序

主页-->小玩艺-->课表日历