Question

我正在制作一个流星应用程序，其中包含一个计划程序，其中包含特定日期要执行的操作列表。

加载应用时，日期默认为当前日期。然后，用户应该可以通过旋转木马滑动以选择不同的日期，当天的详细信息将从mongoDB填充到日历中。

我希望能够在所选当前日期的任一侧+/- 3天内使用正确的内容填充幻灯片。当用户向左或向右滑动时，日期应该更改，每张幻灯片中的内容应该匹配+/- 3天。

我目前正在使用swiper，但我不相信它会按照我的意愿去做，因为我需要动态加载内容，并且幻灯片计数无法正常工作。

我目前有这个：

var mySwiper = $('.swiper-container').swiper({
slidesPerView: 7,
spaceBetween: 30,
centeredSlides: true,
initialSlide: 3,
pagination: {
  el: '.swiper-pagination',
  clickable: true,
},
onSlideChangeEnd: function () {

  //  Get the active slide from the slider
  let newNumber = mySwiper.activeIndex;

  //  Work out if we've gone forward or backwards and how much by
  let difference = changeStatus.get() - newNumber;

  //  Get the current date, and use the difference to subtract. 
  //  We can subtract a negative to make a positive so this also lets us add
  let currentTaskDate = moment(taskDate.get());
  let newTaskDate = moment(currentTaskDate).subtract(difference, 'days');

  // change current 
  taskDate.set(newTaskDate);
  changeStatus.set(newNumber);

}});

这允许我查看日期，但无法动态加载内容。我想我只需要7张幻灯片，所选幻灯片始终是当前日期。

我有一个函数可以在这里找到日期：

tasks() {
// Set variables to query start and end of day
const startDateToQuery = moment(taskDate.get()).startOf('day').toString();  
const endDateToQuery = moment(taskDate.get()).endOf('day').toString();  

// Put an error here so we know if it hasn't returned anything.
let t = Tasks.find({taskDate: { $gte: new Date(startDateToQuery), $lt:new Date(endDateToQuery) }},  { sort: { createdAt: -1 } }).fetch();
if (t.length > 0) {
  return t;
} else {
  return [{ error: 'No Content Found' }]
}}

使用轮播作为日历

0 个答案: