小程序最頂部橫向日歷

不多說，看圖說話。

 

 最終的效果就是左右可以滑動選擇日期，點擊日期查詢數據。

WXML

<!-- 橫向日期 -->
      <swiper class="swiper" display-multiple-items="{{clientWidthCount}}">
        <block wx:for="{{Dates}}" wx:key="{{item.id}}">
          <swiper-item id="{{item.id}}" bindtap="ClickDateCheng">
            <text class="swiper-xingqi {{dateCurrentStr==item.id?'selZhou':''}}">{{item.text}}</text>
            <image class="{{dateCurrentStr==item.id?'selImg':''}}" src="{{bgWhiteImgUrl}}" />
            <text class="swiper-day {{dateCurrentStr==item.id?'selDay':''}}">{{dateCurrentStr==item.id?item.mon+'-'+item.day:item.day}}</text>
            <text class="swiper-price {{dateCurrentStr==item.id?'selPrice':''}}">{{item.price}}</text>
          </swiper-item>
        </block>
      </swiper>
      <view class="data-month">
        <navigator url='/pages/calendardj/index'>
          <image src="/images/dijia.jpg"></image>
        </navigator>
      </view>

JS

let app = getApp();
let compose = require('../../utils/compose');
let dateFormat = require('../../utils/dateutil');
let utils = require('../../utils/utils');
Page({
  data: {
    dateCurrentStr: dateFormat.formatDay(new Date()), // 正選擇日期的 id
    bgWhiteImgUrl: 'http://img0.imgtn.bdimg.com/it/u=1641805254,627977274&fm=26&gp=0.jpg', //選中的日期白色背景圖
    Dates: [],
    dateListArray: ['周 日', '周 一', '周 二', '周 三', '周 四', '周 五', '周 六'],
    maxCount: 15, //橫向日期默認顯示的日期數量
    clientHeight: 0,
    clientWidthCount: 0
  },
  onLoad: function () {
    //加載前設置loading為true
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          clientHeight: res.windowHeight - 90,
          clientWidthCount: parseInt(res.windowWidth / 50)    ///一個小正方形寬度50，獲得屏幕寬度計算數量
        });
      }
    })

    // 在日期數組中添加10條記錄(從當天開始)
    this.add(new Date(), "今 天");
    for (var i = 1; i <= this.data.maxCount; i++) {
      //獲取AddDayCount天后的日期
      var txt = "";
      if (i == 1) {
        txt = "明 天"
      }
      if (i == 2) {
        txt = "后 天"
      }
      this.add(new Date().setDate(new Date().getDate() + i), txt);
    }


    this.setData({
      loading: true,
      Dates: this.data.Dates
    });
  },


  // 日歷組件部分
  add: function (obj, txt) {
    var date = new Date(obj);
    var year = date.getFullYear();
    var mon = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    var week = this.data.dateListArray[date.getDay()];
    if (txt != "") {
      week = txt;
    }
    var obj = {
      id: year + '-' + mon + '-' + day,
      text: week,
      mon: mon,
      day: day,
      price: '￥100'
    };
    this.data.Dates.push(obj);
  },
  ClickDateCheng: function (e) {
    var currentDate = e.currentTarget.id;
    this.setData({
      dateCurrentStr: currentDate
    });
    // 刷新列表
    wx.showToast({
      title: '加載中...',
      icon: 'loading',
      duration: 1000
    })
  }

})

WXSS

/* 橫向日期 */
/*橫向日期輪播圖*/
.swiper {
  height: 58px;
  width: 100%;
  background: #39BF7A;
  color: white;
  padding: 12rpx 8rpx;
  position: relative;
}

.swiper image {
  height: 46px;
  width: 46px;
  border-radius: 6px;
  opacity: 0.2;
}
.swiper-xingqi{
  position:absolute;
  left: 24%;
  top: 2rpx;
  font-size: 19rpx;
  z-index: 5;
}
.swiper-day{
  position:absolute;
  left: 24%;
  top: 27%;
  font-size: 33rpx;
}
.swiper-price{
  position:absolute;
  left: 15%;
  bottom: 5.2%;
  font-size: 20rpx;
}

/* 當前選中星期 */
.swiper .selZhou{
color: black;
}
/* 當前選中日期 */
.swiper .selDay{
color: black;
 position:absolute;
  left: 6rpx;
  font-size: 30rpx;
}
.swiper .selImg{
opacity: 0.9;
}
.swiper .selPrice{
  color: red;
}

.data-month {
    position: absolute;
    right: 5rpx;
    top: 10rpx;
}
.data-month image{
  width: 46px;
  height: 46px;
}


/* 日期下面的廣告位 */
.date-choose_img{
  width: 100%;
  height: 60px;
  position: relative;
}
.date-choose_img image{
  width: 100%;
  height: 100%;
  padding: 6px;
}
.date-choose_img view{
position: absolute;
top: 26%;
left: 7%;
  font-weight: bold;
  font-size: 33rpx;
}
.date-choose_txt{
  color: red;
    font-size: 35rpx;
}
.day_price{
  font-size: 16rpx;
  color: rgb(255, 0, 34);
}

 最后點擊右邊的低價日歷跳轉到日歷頁面，效果如下：

 

 有需要這個日歷的找我要哈。網上也有的