Vue бесконечная скользящая неделя выбирает компонент даты

внешний интерфейс GitHub Vue.js CSS

пиши на фронт...

Когда я раньше работал над проектом для мобильного телефона, мне нужно было проводить пальцем влево и вправо (пролистывать по неделям), чтобы выбрать плагин даты, а Vue в то время в этом проекте не использовался. В то время я не мог найти подходящий сторонний плагин, поэтому я потратил некоторое время на его нативный JavaScript, в то время я хотел написать его как компонент на основе Vue, и у меня это получилось. в скором времени! , я столкнулся с ямой в процессе, которая будет поднята позже!

Первый взгляд на эффект

идеи

В соответствии с датой, переданной пользователем (сегодня по умолчанию не передается), получите даты, соответствующие предыдущей неделе, текущей неделе и следующей неделе, и поместите их в даты массива.

        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'),
            }
        )

Создайте дату, соответствующую каждой неделе в соответствии с данными

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
        }

Создайте стиль для каждого скользящего элемента

        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, чтобы получить преобразование текущей недели в реальном времени.
  • Конечно, изменение значения ActiveIndex, конечно, изменение значения ActiveIndex недостаточно для достижения неограниченного скольжения, мы должны смотреть на даты в работе, если это первый элемент левого слайда удаления дат и даты внутри нажатия Соответствующая дата на следующей неделе, если правильно удалить последний слайд и передний элемент сетевой массивы соответствующей даты на прошлой неделе

яма

Так как этот компонент анимирован через переход css3, сначала я прописал в css переход: преобразование 0.5s easy-out для трех использованных мной скользящих элементов, кто знает, что я натравил на себя, ведь в итоге мы изменили activeIndex Позже, если вы хотите удалить дату, вы должны добавить элемент в массив, что приведет к изменению даты, что заставит Vue повторно обновить интерфейс, в результате чего анимация снова появится! Последним решением, о котором я подумал, было ввести переменную isAnimation для управления значением перехода.Только при скольжении включается эффект сверханимации, а затем слушать время перехода, чтобы сбросить isAnimation = false, а затем обновить даты

использовать

import weekSlider from 'v-week-slider'

Vue.use(weekSlider)

<week-slider></week-slider>

props

prop требуется Типы иллюстрировать
defaultDate false String Дата указана, по умолчанию сегодня, ГГГГ-ММ-ДД
showYear false Boolean Отображать ли год и месяц текущей недели, по умолчанию false

events

имя иллюстрировать параметр обратного вызова
dateClick время срабатывания даты клика Дата клика (ГГГГ-ММ-ДД)

наконец

гитхаб-адрес

Я впервые публикую статью в сообществе, и я все еще изучаю Vue! Если письмо плохое, пожалуйста, погладьте чиновников!

Категории