How to implement a calendar with dates that can slide left and right based on moment?

The content of this article is about how to implement a calendar that can slide left and right based on moment? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The effect is as shown in the figure (the date can be slid left and right)

Ideas:
1. First get three adjacent weeks When initializing the data, the container is moved to the left by a distance of the viewport, ensuring that the middle circumference is within the visible range (the range is 1)
2. In the touch movement stage, for example, moving to the left is equivalent to changing However, the index of the range is 2, which is the range of two viewports moved to the left.
3. When the movement is completed, there is no data to be displayed on the right. It is necessary to reorganize the data and add one week backward to make the current The displayed week is in the middle. At the same time, the displayed index needs to be changed to 1

1. Use moment to process the date data

to display the 7 days of this week in the current viewport. Since it needs to slide, so in advance You also need to prepare the week before today and the week after today

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"

to get the array: dates

##Three templates can be generated from this data, representing last week, this week and next week respectively. Based on this data, the details of last week, this week and next week can be calculated.

      getDays: function (day) {
        let arr = []
        /* 计算传进来的日期为星期几 */
        let weekOfDate = Number(moment(day).format('E'))
        // 提前定义好的： this.week = ['一', '二', '三', '四', '五', '六', '日']
        for (let i = 0; i Traverse the array dates. The details of three weeks can be passed into getDays respectively<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="How to implement a calendar with dates that can slide left and right based on moment?"></span></p>Then traverse the array for page rendering<p></p><pre class="brush:php;toolbar:false">            <template>
                <p>
                    </p>
<p>
                        </p>
<p>{{day.date.split('-')[2]}}</p>
                    
                
            </template>

Here, the static display has been Complete

Add sliding function to component

Rewrite the page rendering code above

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

Last touch time processing:

      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 Reset container position after 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
        }
      }

Related recommendations:

Atitit. Lunar calendar date calculation based on timestamp

How to implement it in js Slide the picture left and right

The above is the detailed content of How to implement a calendar with dates that can slide left and right based on moment?. For more information, please follow other related articles on the PHP Chinese website!