根據日曆查課表 橫向滑動

這個是初次加載頁面 

可左滑查看前一個月的課表

 

可右滑查看後一個月的課表 

 

源碼

wxml

<scroll-view class="scroll-view" scroll-left="{{scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation>
  <view class='item' style='width:{{itemWidth}}px' wx:for="{{dateList}}" data-index='{{index}}' bindtap='clickDate'>
    <view class='text-view'>
      <text class='week'>{{item.month}}月</text>
      <view wx:if="{{item.month == sysmonth && item.day == nowDate}}">
        <text class='week'>今日</text>
      </view>
      <view wx:else>
        <text class='week'>{{item.week}}</text>
      </view>
      <view class='day {{index==clickIndex?"day-active":""}}'>{{item.day}}</view>
    </view>
  </view>
</scroll-view>

<!-- 修改課程列表 -->
<view bindtap="goActiveDet" class="active-list bg_white radius5" style='padding:0rpx;margin-bottom:30rpx;box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);margin-top:10rpx;' data-id="{{item.id}}" wx:if="{{courselist.length > 0 }}" wx:for="{{courselist}}">
    <!-- 左邊課程圖 -->
    <view class="active-img-block radius5" style='background-image:url("{{item.course_img}}");width:100%;background-size:100%;background-repeat:no-repeat;'>
        <!-- <image class="active-list-img" src="{{item.course_img}}"></image> -->
        <view class='fl pr' style='width:58%;padding-top:35rpx;'>
           <text class='block font17 white pa' style='top:0rpx;left:0rpx;'>┏</text>
           <text class='block font17 white pa' style='top:0rpx;left:370rpx;'> ┓</text>
           <text class='block font18 ellipsis tl white' style='padding-top:13rpx;padding-left:30rpx;'>{{item.course_name}}</text>
           <text class='block font14 tl white' style='padding-top:20rpx;padding-left:30rpx;'>開課時間：{{item.course_time}}</text>
           <text class='block font17 white pa' style='top:160rpx;left:0rpx;'>┗</text>
           <text class='block font17 white pa' style='top:160rpx;left:375rpx;'>┛</text>
        </view>
        <view class="fr" style='width:35%;'>
          <view class='pr bgtheme' style='width:190rpx;height:55rpx;margin:0 auto;margin-top:31%;border-radius: 30rpx;' bindtap='goCourse' data-sts="{{item.overstatus}}" data-id="{{item.id}}" data-img="{{item.course_img}}">
          <text class='block font14 white tc pa'style='width:190rpx;height:55rpx;left:1%;top:0rpx;letter-spacing:3rpx;line-height:50rpx;' >{{item.overstatus == 1?'已結束':'立即預約'}}</text>
        </view>
        </view>
        <view class='cl'></view>
    </view>
</view>

<view wx:if="{{courselist.length <=0 }}" style='margin: 0 auto;padding-top:300rpx;padding-bottom:100rpx;'>
  <view class='tc font14 gray9' style='margin:0rpx 0 200rpx;'>
    <image src='../../../resource/images/kong.png' style='width:90rpx;height:90rpx;'></image>
    <text class='m_t10 block' style='margin-left:40rpx'>空空如也 ~~</text>
  </view>
</view>

js

var app = getApp();

Page({
  data: {
    date: [],
    weeks: ['日', '一', '二', '三', '四', '五', '六'],
    days: [],
    year: 0,
    mouth: 0,
    nowDate: '',
    sts: -1,
    flag: 0,
    tabBarList: [],   //底部導航列表
    dateList: [],    //存放日期的數組
    nowDate: '', //系統當前日期
  },

  // 格式化日期，時間
  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(this.formatNumber).join('/') + ' ' + [hour, minute, second].map(this.formatNumber).join(':')
  },
  // 格式化數字
  formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  },

  // 獲取日期詳情
  getDateInfo(ts) {
    const date = new Date(ts);
    const weekArr = new Array("日", "一", "二", "三", "四", "五", "六");
    const week = date.getDay();
    let dateString = this.formatTime(date);
    // let shortDateString = dateString.replace(/\//g, '-').substring(5, 10).replace(/-/g, '月') + "日";
    let shortDateString = dateString.replace(/\//g, '-').substring(5, 10).replace(/-/g, '/');
    if (date.getDate() < 10) {
      shortDateString = shortDateString.replace(/0/g, '');
    }
    return {
      shortDateString,
      dateString,
      month: date.getMonth() + 1,
      day: date.getDate(),
      week: weekArr[week]
    }
  },


/**
 * 生命週期函數--監聽頁面加載
 */
  onLoad: function (t) {
    var that = this;
    var myDate = new Date(); //獲取系統當前時間
    var sysmonth = myDate.getMonth() + 1
    var nowDate = myDate.getDate();   //當前是本月幾日
    var today = myDate.toLocaleDateString();  //今日年月日
    that.setData({
      nowDate: nowDate,
      sysmonth: sysmonth
    }),

    // 獲取屏幕寬度，設置每個日期寬度
    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.setData({
          windowWidth: res.windowWidth,
          itemWidth: parseInt(res.windowWidth / 7)
        });
      },
    })
    this.initData();

      app.util.request({
        url: "entry/wxapp/GetAd",
        data: {
        },
        success: function (a) {
          var team = a.data.support;
          that.setData({
            team: team
          });
        }
      }),
    wx.request({
      url: app.siteInfo.hosturl + 'vipcoursebydate',
      data: {
        "date": today,
      },
      success:function(res){
        var courselist = res.data.data;
        console.log(courselist);
        that.setData({
          courselist: courselist,
        });
      }
    })

    //底部導航
    this.setData({
      tabBarList: app.globalData.tabbar4
    });
    var a = this;
    app.util.request({
      url: "entry/wxapp/url",
      cachetime: "0",
      success: function (t) {
        wx.setStorageSync("url", t.data), a.setData({
          url: t.data
        });
      }
    }), wx.setNavigationBarColor({
      frontColor: wx.getStorageSync("fontcolor"),
      backgroundColor: wx.getStorageSync("color"),
      animation: {
        duration: 0,
        timingFunc: "easeIn"
      }
    });
    app.globalData.aci;
    var e = wx.getStorageSync("url"), n = wx.getStorageSync("users").id;
    app.util.request({
      url: "entry/wxapp/getExpert",
      cachetime: "0",
      data: {
        user_id: n
      },
      success: function (t) {
        a.setData({
          talent: t.data,
          url: e,
          page: 1,
          activeIndex: 0
        });
      }
    }), app.util.request({
      url: "entry/wxapp/url",
      cachetime: "0",
      success: function (t) {
        wx.setStorageSync("url", t.data), a.setData({
          url: t.data
        });
      }
    });
  },


  // 初始化日期
  initData() {
    const nowDateTime = +new Date();
    let dateList = [];
    for (let i = -30; i < 30; i++) {
      let obj = this.getDateInfo(nowDateTime + i * 24 * 60 * 60 * 1000);
      obj.isChoose = i == 0;
      dateList.push(obj);
    }
    this.setData({
      dateList,
      clickIndex: 30,
      scrollLeftIndex: 30

    });
  },

  // 點擊日期方法
  clickDate(e) {
    var that = this;
    console.log('點擊日期攜帶的下標：', e.currentTarget.dataset);  
    console.log('點擊日期攜帶的下標：', e.currentTarget.dataset.index);  //當前的點擊的日期
    var index = e.currentTarget.dataset.index;
    that.setData({
      clickIndex: index
    });
    // console.log(that.data.scrollLeftIndex);
    console.log('當前點擊日期：', that.data.dateList[index].shortDateString);   //當前點擊的日期
    var postdate = that.data.dateList[index].shortDateString;
    console.log(postdate);
    wx.request({
      url: app.siteInfo.hosturl + 'vipcoursebydate', 
      data: {
        "date": postdate,
      },
      success: function (res) {
        console.log(res);
        var courselist = res.data.data;
        console.log(courselist);
        that.setData({
          courselist: courselist,
        });
      }
    });
  },

  //點擊查看課程詳情
  goCourse: function (e) {
    var o = this;
    var t = e.currentTarget.dataset.id, a = e.currentTarget.dataset.img;
    var sts = e.currentTarget.dataset.sts;
    var user = wx.getStorageSync('users');
    if(sts == 0){
      if (user.isvip == 0) {
        wx.showModal({
          title: "提示",
          content: "您不是vip，無法預約，請前往門店諮詢辦理"
        });
      } else {
        wx.request({
          url: app.siteInfo.hosturl + 'isgetcourse',
          data: {
            course_id: t,
            user_id: user.id
          },
          success: function (res) {
            if (res.data == 1) {
              wx.showModal({
                title: '提示',
                content: '您已預約，請勿重複預約',
              })
            } else {
              wx.navigateTo({
                url: "/byjs_sun/pages/product/courseInfo/courseInfo?id=" + t + "&img=" + a + "&free=1"
              });
            }
          }
        })
      }
    }
  },

  //原本的js
  goIndex: function (t) {
    wx.reLaunch({
      url: "../../product/index/index"
    });
  },
  goChargeIndex: function (t) {
    wx.reLaunch({
      url: "../../charge/chargeIndex/chargeIndex"
    });
  },
  goPublishTxt: function (t) {
    wx.reLaunch({
      url: "../../publishInfo/publish/publishTxt"
    });
  },
  goMy: function (t) {
    wx.reLaunch({
      url: "../../myUser/my/my"
    });
  },

});

樣式

page {
    /* background: #313751; */
}
.bgtheme{background: #313751;}
.date {
    display: flex;
    flex-direction: row;
    justify-content: center;
    line-height: 4em;
    align-items: center;
}
.direction {
    width: 40rpx;
    margin: 15rpx;
    height: 40rpx;
}
.header {
    display: flex;
    flex-direction: row;
    color: #fff
}
.weeks-item-text {
    width: 100%;
    font-size: 34rpx;
    text-align: center;  
}
.body-days {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}
.days-item {
    width: 14.285%;
    display: flex;
    justify-content: center;
    align-content: center;
}
.days-item-text {
    width: 20rpx;
    padding-top: 10rpx;
    padding-bottom:10rpx;
    margin-top: 15rpx;
    padding-left:20rpx;
    padding-right:30rpx;
    margin-left: 15rpx;
    border-radius: 5rpx;
    font-size: 26rpx; 
    color: #fff;
    text-align: center;
}
/* 選中狀態 */
.days-item-selected{
  background: #FDC500;
}

/* 課程樣式 */
.fight-list {
    padding-left: 20rpx;
    display: flex;
    margin-top: 35rpx;
}
.fight-list-block {
    width: 320rpx;
    margin-right: 30rpx;
}
.fight-list-block-img {
    width:320rpx;
    height: 330rpx;
    max-width: 320rpx;
}
.fight-list-block-title {
    height: 62rpx;
    line-height: 62rpx;
    font-size: 28rpx;
    background: #3F4663;
    color: #fff;
}
/* 新增樣式 */
.active-list {
    height: 200rpx;
    width: 91.5%;
    margin-bottom: 20rpx;
    margin: 0 auto;
}
.active-list-img {
    height: 200rpx;
    width: 100%;
}
.active-img-block {
    width: 45%;
    height: 210rpx;
}
.scroll-view {
  height: 200rpx;
  width: 100%;
  white-space: nowrap;
}
.item {
  height: 200rpx;
  display: inline-block;
}
.text-view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.month {
  font-size: 30rpx;
  margin-top: 10rpx;
}
.week {
  font-size: 32rpx;
  margin-top: 10rpx;
}
.day {
  font-size: 32rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 60rpx;
  margin-top: 30rpx;
}

/* 日期選中的樣式 */
.day-active {
  background-color: #313751;
  color: #fff;
}
/* 新增樣式 */