Comment mettre en place un calendrier avec des dates qui peuvent glisser vers la gauche et la droite en fonction des moments ?

Le contenu de cet article explique comment implémenter un calendrier avec des dates qui peuvent glisser vers la gauche et la droite en fonction des moments ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

L'effet est comme indiqué ci-dessous (la date peut être glissée vers la gauche ou la droite)

Idées :
1. Obtenez d'abord les données de trois semaines adjacentes, lors de l'initialisation, déplacez le conteneur vers la gauche d'une certaine distance de la fenêtre d'affichage, en vous assurant que la circonférence médiane est dans la plage visible (la plage est 1)
2. Touchez l'étape de mouvement, telle que se déplacer vers la gauche équivaut à changer. Cependant, l'indice de la plage est 2, c'est-à-dire la plage des deux fenêtres déplacées vers la gauche
3. Le mouvement est terminé à ce moment, il n'y a aucune donnée. pour être affiché sur le côté droit. Il est nécessaire de réorganiser les données et d'ajouter une semaine en arrière pour que la semaine affichée soit au milieu, et l'index affiché doit être changé en 1

1. Utilisez moment pour traiter les données de date

pour afficher les 7 jours de cette semaine dans la fenêtre actuelle Comme il doit glisser, donc à l'avance Vous devez également préparer la semaine d'avant aujourd'hui et la semaine d'après aujourd'hui

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"

pour obtenir le tableau : dates

Trois modèles peuvent être générés à partir de cela données, représentant respectivement la semaine dernière, cette semaine et la semaine prochaine. Sur la base de ces données, les détails de la semaine dernière, de cette semaine et de la semaine prochaine peuvent être calculés.

      getDays: function (day) {
        let arr = []
        /* 计算传进来的日期为星期几 */
        let weekOfDate = Number(moment(day).format('E'))
        // 提前定义好的： this.week = ['一', '二', '三', '四', '五', '六', '日']
        for (let i = 0; i Parcourez les dates du tableau. Passez respectivement dans getDays pour obtenir trois semaines de détails <p></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="Comment mettre en place un calendrier avec des dates qui peuvent glisser vers la gauche et la droite en fonction des moments ?"></span></p> puis parcourez le tableau pour le rendu de la page <p></p><pre class="brush:php;toolbar:false">            <template>
                <p>
                    </p>
<p>
                        </p>
<p>{{day.date.split('-')[2]}}</p>
                    
                
            </template>

Ici, L'affichage statique est terminé

Ajouter une fonction de glissement au composant

Réécrivez le code de rendu de la page ci-dessus

   <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
      }

Traitement du temps de dernière touche :

      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 Réinitialiser la position du conteneur après la transition <p></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
        }
      }

Recommandations associées :

Calcul de la date du calendrier lunaire basé sur l'horodatage

Comment faire glisser des images vers la gauche et la droite dans js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!