Wie implementiert man einen Kalender mit Datumsangaben, die je nach Zeitpunkt nach links und rechts verschoben werden können?

Der Inhalt dieses Artikels befasst sich mit der Implementierung eines Kalenders mit Datumsangaben, die je nach Zeitpunkt nach links und rechts verschoben werden können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Der Effekt ist wie unten gezeigt (das Datum kann nach links oder rechts verschoben werden)

Ideen:
1. Erhalten Sie zunächst die Daten von drei benachbarten Wochen. Bewegen Sie den Container beim Initialisieren um einen Abstand des Ansichtsfensters nach links und stellen Sie sicher, dass der mittlere Umfang innerhalb des sichtbaren Bereichs liegt (der Bereich ist 1).
2. Berühren Sie die Bewegungsstufe, z Das Verschieben nach links entspricht einer Änderung. Der Index des Bereichs beträgt jedoch 2, dh der Bereich der beiden nach links verschobenen Ansichtsfenster
3. Die Bewegung ist zu diesem Zeitpunkt abgeschlossen Um auf der rechten Seite angezeigt zu werden, müssen die Daten neu organisiert und eine Woche nach hinten hinzugefügt werden. Die angezeigte Woche befindet sich in der Mitte und der angezeigte Index muss auf 1

1 geändert werden. Verwenden Sie Moment, um Datumsdaten zu verarbeiten

, um die 7 Tage dieser Woche im aktuellen Ansichtsfenster anzuzeigen. Da ein Verschieben erforderlich ist, müssen Sie im Voraus auch die Woche vor dem heutigen Tag und die Woche nach dem heutigen Tag vorbereiten

let today = moment().format('YYYY-MM-DD') // 当前日期："2018-09-14"
moment(today).subtract(7, 'd').format('YYYY-MM-DD') // 上一周的今天："2018-09-07"
moment(today).add(7, 'd').format('YYYY-MM-DD') // 下一周的今天："2018-09-21"

um das Array zu erhalten: Datumsangaben

Aus diesen Daten können drei Vorlagen generiert werden, die darstellen Basierend auf diesen Daten können die Details der letzten Woche, dieser Woche und der nächsten Woche berechnet werden.

      getDays: function (day) {
        let arr = []
        /* 计算传进来的日期为星期几 */
        let weekOfDate = Number(moment(day).format('E'))
        // 提前定义好的： this.week = ['一', '二', '三', '四', '五', '六', '日']
        for (let i = 0; i <p>Durchlaufen Sie die Array-Daten. Übergeben Sie jeweils getDays, um drei Wochen lang Details zu erhalten </p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/572/774/579/1537000935877414.png" title="1537000935877414.png" alt="Wie implementiert man einen Kalender mit Datumsangaben, die je nach Zeitpunkt nach links und rechts verschoben werden können?"></span></p><p> und durchlaufen Sie dann das Array für die Seitenwiedergabe </p><pre class="brush:php;toolbar:false">            <template>
                <p>
                    </p>
<p>
                        </p>
<p>{{day.date.split('-')[2]}}</p>
                    
                
            </template>

Hier die Statik Anzeige wurde abgeschlossen

Schiebefunktion zur Komponente hinzufügen

Schreiben Sie den Seitenrendering-Code oben neu

   <p>
        </p><p>
            <template>
                <p>
                    </p>
<p>
                        </p>
<p>{{day.date.split('-')[2]}}</p>
                    </template></p>
                
            
        
    

     // actIndex: 当前活动视图的缩影，初始为1，sliderWidth：视口的宽度， distan： {x:0, y: 0}: 触摸移动的距离
     // 
     getTransform: function () {
        this.endx = (-this.actIndex * this.sliderWidth)  + this.distan.x
        let style = {}
        style['transform'] = 'translateX(' + this.endx + 'px)'
        // 这一条必须写，因为触摸移动的时候需要过渡动画，但是在动画结束重组数据的时候需要瞬间回到该去的位置，不能要过渡动画
        style['transition'] = this.isAnimation ? 'transform .5s ease-out' : 'none'
        return style
      }

Letzte Berührungszeitverarbeitung:

      touchStart: function (e) {
        this.start.x = e.touches[0].pageX
      },
      touchmove: function (e) {
        // 这里需要过渡动画
        this.isAnimation = true
        this.distan.x = e.touches[0].pageX - this.start.x
        // 需要移动的容器
        let dom = this.$refs.sliders
        // 向左
        this.endx = this.endx + this.distan.x
        dom.style['transform'] = 'translateX('+ this.endx + 'px)'
      },
      touchend: function (e) {
        this.isAnimation = true
        this.distan.x = e.changedTouches[0].pageX - this.start.x
        // 向右
        if (this.distan.x > 0) {
          this.direction = 'right'
          this.actIndex = 0
        } else if (this.distan.x <p>Containerposition zurücksetzen danach Übergang </p><pre class="brush:php;toolbar:false">// 过渡结束
      transitionEnd: function () {
        this.isAnimation = false
        if (this.actIndex === 2) {
            this.dates.push({
                date: moment(this.dates[this.actIndex].date).add(7, 'd').format('YYYY-MM-DD')
            })
            this.dates.shift()
            this.actIndex = 1
        }else if (this.actIndex === 0) {
            this.dates.unshift({
                date: moment(this.dates[this.actIndex].date).subtract(7, 'd').format('YYYY-MM-DD')
            })
            this.dates.pop()
            this.actIndex = 1
        }
      }

Verwandte Empfehlungen:

Atitit. Mondkalender-Datumsberechnung basierend auf Zeitstempel

Wie man es in js implementiert Schieben Sie das Bild nach links oder rechts

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Kalender mit Datumsangaben, die je nach Zeitpunkt nach links und rechts verschoben werden können?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!