Vue無限滑動周選擇日期的組件

寫在最前面···

以前在作一個手機端項目的時候，須要一個左右滑動（按周滑動）選擇日期插件，並且當時這個項目沒有用到Vue。當時又沒有找到合適的第三方插件，就花了點時間用原生JavaScript寫了出來，當時心中就想把它寫成基於Vue的組件，這短期閒了把它弄出來了！，在這個過程當中遇到了一個坑，後面會提出來！

先看效果

思路

根據用戶傳入日期（不傳默認今天），獲取上一週，當週，下一週對應的日期放數組dates裏

let vm = this
        this.dates.push(
            {
                date: moment(vm.defaultDate).subtract(7, 'd').format('YYYY-MM-DD'),
            },
            {
                date: vm.defaultDate,
            },
            {
                date: moment(vm.defaultDate).add(7, 'd').format('YYYY-MM-DD'),
            }
        )

複製代碼

根據datas 生成每一週對應的日期

getDaies (date) {
            let vm = this,
                arr = []
            let weekOfDate = Number(moment(date).format('E'))
            let weeks = ['日', '一', '二', '三', '四', '五', '六']
            let today = moment()
            let defaultDay = moment(vm.defaultDate)
            for (var i = 0; i < 7; i++) {
                let _theDate = moment(date).subtract(weekOfDate - i, 'd')
                arr.push({
                    date: _theDate.format('YYYY-MM-DD'),
                    week: weeks[i],
                    isToday: _theDate.format('YYYY-MM-DD') === today.format('YYYY-MM-DD'),
                    isDay: _theDate.format('E') === defaultDay.format('E')
                })
            }
            return arr
        }
複製代碼

生成每個滑動單元的style

getTransform (index) {
            let vm = this
            let style = {}
            if (index === vm.activeIndex) {
                style['transform'] = 'translateX('+ vm.distan.x +'px)'
            }
            if (index < vm.activeIndex) {
                style['transform'] = 'translateX(-100%)'
            }
            if (index > vm.activeIndex) {
                style['transform'] = 'translateX(100%)'
            }
            style['transition'] = vm.isAnimation ? 'transform 0.5s ease-out' : 'transform 0s ease-out'
            return style
        }
複製代碼

而後就是處理touchstart touchend touchmove事件了，這裏就不貼代碼了，說下邏輯：

• touchstart 記錄滑動起點位置
• touchmove 得到滑動距離賦值給 vm.distan.x 實時得到當前周transform
• touchend 改變activeIndex的值，固然改變activeIndex的值是不夠的，要實現無限滑動，就要在操做一下dates，若是是左滑刪除dates的第一個元素而且往dates裏面push下下週對應日期，若是是右滑刪除最後一個元素併網數組前面unshift上上週對應的日期

坑點

由於這個組件是經過css3的transition來實現動畫的，最開始我是把所用三個滑動元素在css裏面寫了transition:transform 0.5s ease-out; 誰知道本身把本身坑了，由於最後咱們改變activeIndex後要刪除一個日期，還要往數組裏面新增一個元素，這樣就會引發dates的改變，進而引發Vue去從新更新界面，致使動畫又出來了！最後想到的解決辦法就是引入一個變量isAnimation來控制transition的值，只有當滑動的時纔開啓過分動畫效果，再偵聽transitionend時間重置isAnimation = false後再更新dates

使用

import weekSlider from 'v-week-slider'

Vue.use(weekSlider)

<week-slider></week-slider>
複製代碼

props

prop	必選	類型	說明
defaultDate	false	String	指定日期，默認今天，YYYY-MM-DD
showYear	false	Boolean	是否顯示當前周所屬年月，默認false

events

名稱	說明	回調參數
dateClick	點擊日期觸發時間	點擊的日期（YYYY-MM-DD）

最後

github地址

第一次在社區發文章，Vue我也還在學習摸索中！寫得很差請各位看官輕拍！