小程序中实现旅游日历价格和余位显示。

话说也真是好久没上博客更新了呢，这段时间一个也是比较忙着做其他的APP，二也是在自学小程序来把之前做的APP转换成小程序格式，在其中也是遇到了一些问题，在摸索中也会慢慢的去解决去找资料。
废话也不多说，这次要分享的是在项目中部分代码，小程序中的旅游日历的价格和余位显示。
一般的如果是在传统的操作DOM的形式下写日历，然后再插入价格都是比较简单的，但是在小程序中可是没有操作DOM 的说法，而是直接对数据的操作然后动态的改变DOM结构，思路有所不同做法也就不一样了，在想的过程中，有几个思路步骤。

利用wx:for 来循环创建view 标签作为日历的每一天。
利用js 在控制日历前面的空格天数，即每个日历开始的时间天数。
匹配后台发过来的日期月份是多少，自动创建多个月份显示，例如2018-07-20，2018-08-20，2018-10-20，就会显示三个月份，分别是7月、8月和10月。
在wx:for 循环的时候匹配接受后台发过来的日期时间，然后再给每个日历下添加新的标签text 写上价格和余位。
之后在组装数据通过this.setData()方法把数据更新

下面直接上代码：

日历wxml 文件


<view class="calender_c">
    <view class="ZYCalender">
      <view class="dateZone rowBox border-b">
        <view class="week rowCon fs28" wx:for="{{week}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
      </view>
      <view class="itemMonth border-b" wx:for="{{allDays}}" wx:key="{{index}}">
        <view class="month">{{item.html}}</view>
        <view class="days">
          <block wx:if="{{item.p > 0}}">
            <view class="day" wx:for="{{item.empty}}" wx:key="{{index}}"></view>
          </block>
          <view class="day" wx:for="{{item.days}}" wx:key="{{index}}" data-id="{{item.ListId}}" catchtap="selectDay">
            <view class="con ">
              <view class="conn border" wx:if="{{item.ListId}}">
                {{item.day}}
                <view class="fs10">￥{{item.Price01}}</view>
                <view class="fs10">> {{item.DateNumber}} 人</view>
              </view>
              <view class="conn" wx:else catchtap="selectDay">
                {{item.day}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

日历wxss


.ZYCalender{
  background: #f5f5f5;
}
.ZYCalender .dateZone {
  width: 100%;
  margin: auto;
  color: #666;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  box-sizing: border-box;
}

.ZYCalender .dateZone .week {
  background: #f5f5f5;
  font-size: 28rpx;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
}

.ZYCalender .dateTable {
  width: 100%;
  margin: auto;
}

.ZYCalender .itemMonth {
  margin-bottom: 10px;
  background: #fff;
  padding: 10px 0;
}

.ZYCalender .itemMonth .month {
  width: 100%;
  text-align: center;
  padding: 8px 0;
  font-size: 32rpx;
}

.ZYCalender .itemMonth .days {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

.ZYCalender .itemMonth .days .day {
  width: 14.28%;
  background: #fff;
  text-align: center;
  height: 110rpx;
  line-height: 28rpx;
  font-size: 28rpx;
  color: #666;
}

.ZYCalender .itemMonth .days .day .con {
  height: 110rpx;
  padding: 10rpx 8rpx;
  box-sizing: border-box;
  
}

.ZYCalender .itemMonth .days .day .con .conn {
  height: 100%;
  padding-top: 8rpx;
  
}
.ZYCalender .itemMonth .days .day .con .conn:active{
  background: #bfdefe;
  color: #fff;
}

.ZYCalender .hover {
  font-size: 24rpx;
  display: inline-block;
  width: 60%;
  background: #ffd101;
  color: #ba0003;
  text-align: center;
  border-radius: 5px;
}

日历 js


Page({
  data: {
    calenderData: '',
    week: ['日', '一', '二', '三', '四', '五', '六'],
    allDays: []
  },
  onLoad: function(options) {
    this.getLinePlanList()
  },
  selectDay: function(event) {
    var id = event.currentTarget.dataset.id
  },
  initCalender: function() {
    var calenderData = this.data.calenderData;
    var arr = [],
      DaysInMonth = [],
      index,
      p,
      days = [],
      setCurrentDate,
      firstDay;
    if (calenderData.length == 0) return
    for (let i = 0; i < calenderData.length; i++) {
      arr.push(calenderData[i].TourDate.substring(0, calenderData[i].TourDate.length - 3));
    }
    index = this.removeRepeatArray(arr);
    for (let i = 0; i < index.length; i++) {
      var obj = {};
      obj.year = index[i].substring(0, 4);
      obj.month = index[i].substring(5, 7);
      obj.html = index[i].substring(0, 4) + '年' + index[i].substring(5, 7) + '月'
      setCurrentDate = new Date(obj.year, obj.month - 1, 1);
      firstDay = setCurrentDate.getDay();
      if (this.isLeapYear(obj.year)) {
        DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      } else {
        DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      }
      obj.days = [];
      obj.empty = [];
      obj.p = firstDay++;
      for (let m = 0; m < obj.p; m++) {
        obj.empty.push(m)
      }
      for (let n = 0; n < DaysInMonth[obj.month - 1]; n++) {
        let a = {};
        a.day = n + 1
        for (let i = 0; i < calenderData.length; i++) {
          if (
            obj.month === calenderData[i].TourDate.substring(5, 7) &&
            obj.year === calenderData[i].TourDate.substring(0, 4) &&
            n + 1 === parseInt(calenderData[i].TourDate.substring(8, 10))
          ) {
            a.ListId = calenderData[i].ListId;
            a.Price01 = calenderData[i].Price01;
            a.DateNumber = calenderData[i].DateNumber;
          }
        }
        obj.days.push(a)
      }
      days.push(obj)
    }
    this.setData({
      allDays: days
    })
  },
  isLeapYear: function(year) {
    return (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0);
  },
  removeRepeatArray: function(arr) {
    return arr.filter(function(item, index, self) {
      return self.indexOf(item) === index;
    });
  },
  getLinePlanList: function() {
// 获取后台数据接口
// 接口中应该要有价格参数和余位参数

  }
})