基于轮播组件的Meteor日程规划应用日期动态加载问题

It sounds like you're on the right track—Swiper absolutely can handle this dynamic content scenario when paired with Meteor's reactive data system. The key is to tie each slide's content to a relative offset from your taskDate reactive variable, adjust that variable when the user swipes, then reset Swiper to keep the current date centered. Here's how to implement it:

1. Refactor the Swiper Initialization & Slide Change Logic #

First, update your Swiper setup to correctly calculate the date offset when the user slides, then reset the Swiper to keep the current date in the center slide (index 3). We'll use Tracker.afterFlush to ensure reactive content updates before adjusting the slide position:

Template.yourScheduleTemplate.onRendered(function() {
  const template = this;
  
  // Initialize Swiper with your desired settings
  const mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 7,
    spaceBetween: 30,
    centeredSlides: true,
    initialSlide: 3,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    onSlideChangeEnd: function(swiper) {
      // Calculate how far the active slide is from the center (index 3)
      const dayOffset = swiper.activeIndex - 3;
      
      // Only act if we're not already on the center slide
      if (dayOffset !== 0) {
        // Update the current task date by the offset amount
        const newDate = moment(taskDate.get()).add(dayOffset, 'days');
        taskDate.set(newDate);
        
        // Wait for Meteor to update slide content, then reset to center
        Tracker.afterFlush(() => {
          swiper.slideTo(3, 0); // 0 duration = instant jump to center
        });
      }
    }
  });
  
  // Store the Swiper instance for future use if needed
  template.swiperInstance = mySwiper;
});

2. Use Reactive Templates for Dynamic Slide Content #

Instead of static slides, render 7 slides tied to relative day offsets from taskDate. Each slide will reactively update its content whenever taskDate changes.

Parent Template (Swiper Container) #

<template name="yourScheduleTemplate">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {{#each offset in [-3, -2, -1, 0, 1, 2, 3]}}
        <div class="swiper-slide">
          {{> daySlide dateOffset=offset}}
        </div>
      {{/each}}
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

Day Slide Template (Individual Slide Content) #

<template name="daySlide">
  <div class="day-title">
    {{formattedDate}}
  </div>
  <div class="tasks-container">
    {{#each task in tasksForDate}}
      <div class="task-item">
        {{task.title}} <!-- Adjust to match your Task document fields -->
      </div>
    {{else}}
      <p>No Content Found</p>
    {{/each}}
  </div>
</template>

Helpers for the Day Slide Template #

These helpers calculate the target date for each slide and fetch corresponding tasks reactively:

Template.daySlide.helpers({
  formattedDate() {
    // Get target date by adding slide's offset to current task date
    const targetDate = moment(taskDate.get()).add(this.dateOffset, 'days');
    return targetDate.format('MMM D, YYYY'); // Customize date format as needed
  },
  tasksForDate() {
    const targetDate = moment(taskDate.get()).add(this.dateOffset, 'days');
    const startOfDay = targetDate.startOf('day').toDate();
    const endOfDay = targetDate.endOf('day').toDate();
    
    // Fetch tasks for the target date, sorted by creation date
    return Tasks.find(
      { taskDate: { $gte: startOfDay, $lt: endOfDay } },
      { sort: { createdAt: -1 } }
    ).fetch();
  }
});

3. Optimize Query Performance #

To make date queries fast, add an index on the taskDate field in your server-side code:

// In your server/main.js or a server-only file
Meteor.startup(() => {
  Tasks._ensureIndex({ taskDate: 1 });
});

How This Works #

• Reactive Updates: Whenever taskDate changes (from a swipe), Meteor automatically re-runs helpers for all 7 slides, updating each to show tasks for new relative dates.
• Centered Current Date: After adjusting taskDate, we reset Swiper to the center slide (index 3), which now displays the new current date—keeping your UI consistent with your requirement of always having the selected date in the center.
• Dynamic Content: Each slide's content is fetched on-demand based on its relative offset, so you never need to add/remove slides dynamically—you just keep 7 slides that update their content reactively.

内容的提问来源于stack exchange，提问作者George