vue uniapp如何实现横向滚动周历,横向滚动一周日历

当前周

下一周 

html部分

<!-- 日历主体 -->

      <view class="calendar_box">
        <div class="left">
          <image src="../../static/all_icon.png" ></image>
          <text>全部</text>
        </div>
        <swiper class="cel" :current="index" circular="true" @change="change">
          <swiper-item
            class="cel-days"
            v-for="(item, index) in weeks"
            :key="index"
          >
            <view
              :class="d.date == currentDate ? 'day selected' : 'day'"
              v-for="(it, i) in item"
              :key="i"
              @click="tapDate(it.date)"
            >
              <div
                :class="it.date == selectday ? 'day_box selectday ' : 'day_box'"
                :id="it.date == today ? 'today' : ''"
              >
                <div class="item1">{{ it.week | weekfilter }}</div>
                <div class="item2 fw" v-if="it.day == '01'">
                  {{ it.month }}月
                </div>
                <div class="item2" v-else>{{ it.day }}</div>
                <div class="item3">1场</div>
                <div class="spot"></div></div
            ></view>
          </swiper-item>
        </swiper>
        <div class="right" @click="goCalendar">
          <image src="../../static/cal_icon.png" ></image>

          <text>日历</text>
        </div>
      </view>

javascript部分

<script>
import dayjs from "../../timer/dayjs.min.js";
export default {
 data() {
    return {
      curIndex: 0,
      index: 0,
      weeks: [],
      currentDate: dayjs().format("YYYY-MM-DD"),
      today: dayjs().format("YYYY-MM-DD"),
      startDate: null,
      endDate: null,
      selectday: dayjs().format("YYYY-MM-DD"),
    };
  },
  onShow(option) {
    this.init();
  },
  methods: {
    tapDate(date) {
      this.selectday = date;
    },
    // 去日历页面
    goCalendar() {
      uni.navigateTo({
        url: "/pages/calendar_page/calendar_page",
      });
    },
    change(e) {
      let { currentDate, index, weeks, startDate, endDate } = this;

      let current = e.detail.current;
      let aDate =
        current - index == -2 || current - index == 1 ? endDate : startDate;
      // console.log(aDate, "aDate");
      // console.log(current, "current");
      if (current == 0) {
        weeks = [
          this.getWeek(0, aDate),
          this.getWeek(1, aDate),
          this.getWeek(-1, aDate),
        ];
        startDate = weeks[2][0].date;
        endDate = weeks[1][0].date;
        currentDate = weeks[0][0].date;
      }
      if (current == 1) {
        weeks = [
          this.getWeek(-1, aDate),
          this.getWeek(0, aDate),
          this.getWeek(1, aDate),
        ];
        (startDate = weeks[0][0].date),
          (endDate = weeks[2][0].date),
          (currentDate = weeks[1][0].date);
      }
      if (current == 2) {
        weeks = [
          this.getWeek(1, aDate),
          this.getWeek(-1, aDate),
          this.getWeek(0, aDate),
        ];
        (startDate = weeks[1][0].date),
          (endDate = weeks[0][0].date),
          (currentDate = weeks[2][0].date);
      }
      this.weeks = weeks;
      this.startDate = startDate;
      this.endDate = endDate;
      this.currentDate = currentDate;
      this.index = current;
      // console.log(currentDate, "currentDate");
      // console.log(endDate, "endDate");
      // console.log(startDate, "startDate");
    },

    curBtn(index) {
      this.curIndex = index;
    },
    init() {
      // 构造一个数组[[],[],[]]，里边放3个星期的数据,[0]放本周，[1]放下一周,[2]放上一周
      let { weeks, startDate, endDate, currentDate } = this;

      let firstDayOfWeek = dayjs(currentDate).subtract(3, "day");
      weeks = [
        this.getWeek(0, firstDayOfWeek),
        this.getWeek(1, firstDayOfWeek),
        this.getWeek(-1, firstDayOfWeek),
      ];
      // console.log(weeks[1][6].date, "weeks[1][6].date");
      startDate = weeks[2][0].date;
      endDate = weeks[1][0].date;
      this.weeks = weeks;
      this.startDate = startDate;
      this.endDate = endDate;
      this.currentDate = firstDayOfWeek;
      // console.log(this.weeks, this.startDate, this.endDate);
    },

    // direction 接收 0,1,-1三个值，分别代表，本周，下周，上周
    getWeek(direction, date) {
      date = dayjs(date);
      // console.log(date.format("YYYY-MM-DD"), "getWeek");
      let firstDayOfWeek = date.subtract(date.day(), "day");
      // console.log(firstDayOfWeek,'firstDayOfWeek');
      let arr = [];
      for (let i = direction * 7; i < (1 + direction) * 7; i++) {
        let d = date.add(i, "day");
        // console.log(d);
        arr.push({
          date: d.format("YYYY-MM-DD"),
          day: d.format("DD"),
          week: d.day(),
          month: d.month() + 1,
        });
      }
      return arr;
    },
  },
  filters: {
    weekfilter(v) {
      let str = null;
      switch (v) {
        case 0:
          str = "周日";
          break;
        case 1:
          str = "周一";
          break;
        case 2:
          str = "周二";
          break;
        case 3:
          str = "周三";
          break;
        case 4:
          str = "周四";
          break;
        case 5:
          str = "周五";
          break;
        case 6:
          str = "周六";
          break;

        default:
          break;
      }
      return str;
    },
  },
};
</script>

css部分

<style>

.calendar_box {
  display: flex;
  box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
  border-radius: 4rpx;
  margin: 0 auto;
  height: 124rpx;
  width: 686rpx;
}
.calendar_box .center {
  height: 124rpx;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow-x: auto;
  width: 490rpx;
}
.day {
}
.left image,
.right image {
  width: 40rpx;
  height: 40rpx;
  /* margin-bottom: -4rpx; */
}
.left,
.right {
  display: flex;
  align-items: center;
  display: flex;
  width: 98rpx;
  /* line-height: 36rpx; */
  justify-content: center;
  background: #f3f4f6;
  border-radius: 0px 4rpx 4rpx 0px;
  flex-direction: column;
  font-size: 20rpx;
  color: #444444;
}
.left {
  background: #ea4336;
  border-radius: 4rpx 0px 0px 4rpx;
  color: #fff;
}
.right text {
  margin-top: 10rpx;
}
.cel {
  height: 80rpx;
  width: 100%;
  height: 124rpx;
  /* margin-bottom: 16rpx; */
}
.cel-days {
  display: flex;
  /* background-color: pink; */
  height: 100%;
}
.day {
  flex: 1;
  color: #333;
  /* background-color: orange; */
  align-items: center;
  text-align: center;
  justify-content: center;

  font-size: 24rpx;
}
.day_box {
  text-align: center;
  display: inline-block;
  height: 124rpx;
  position: relative;
  width: 100%;
  /* width: 98rpx; */
  /* border: 1rpx solid #000; */
  border-radius: 4rpx;
  border: 1rpx solid #fff;
}
.selectday {
  /* background-image: linear-gradient(-45deg, #3857e3, #567bfd); */
  border: 1rpx solid red;
  font-weight: bold;
}
#today {
  color: red;
}
.emary {
  width: 100%;
  text-align: center;
  margin: 32rpx auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 44rpx;
}
.emary image {
  width: 472rpx;
}
.item1,
.item3,
.item2 {
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /* background: #875ec3; */
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-top: 6rpx;
  overflow: hidden;
}
.item2 {
  /* background: #ffb827; */
  width: 100%;
  font-size: 32rpx;
}
.item3 {
  margin-top: 2rpx;
  width: 100%;
}

.fw {
  font-weight: 600;
}
#today .spot {
  width: 6rpx;
  height: 6rpx;
  background-color: #ea4336;
  border-radius: 50%;
  position: absolute;
  left: 48%;
  bottom: 6rpx;
}
</style>