Эта статья в основном предназначена для ознакомления и того, как использовать три компонента, обычно используемые в мобильном терминале vue, которые теперь являются открытым исходным кодом, добро пожаловать в использование:
vue-floating
Компонент плавающего окна на основе vue, который можно свободно перетаскивать по экрану, позиция после перетаскивания может оставаться неизменной, или можно отпускать пальцем горизонтальный шов плавающего окна во время движения.
Example
- Пальцем освободите горизонтальный шов плавающего окна во время движения:
- Положение после перетаскивания не меняется
Demo
examplesВ каталоге есть демонстрационное использование, пожалуйста, скачайте и просмотрите сами
Api
Ознакомьтесь с документацией по API
еслиvue-floatingЯ думаю, это хорошо, не забудьте поставить звезду
vue-custom-scrollview
Основанный на улучшенной прокрутке, настраиваемый компонент мобильного списка прокрутки вверх-вниз и вниз-вниз расширяет возможности прокрутки. Анимация по умолчанию отображается вверх и вниз. Если вы хотите создать нужную анимацию вверх и вниз, отметьтеapi
Example
Demo
examplesВ каталоге есть демонстрационное использование, пожалуйста, скачайте и просмотрите сами
Api
Ознакомьтесь с документацией по API
В настоящее время предоставляются только указанные выше распространенные методы и API. Если у вас есть дополнительные потребности, пожалуйста, напишите
еслиvue-custom-scrollviewЯ думаю, это хорошо, не забудьте поставить звезду
vue-finger-directive
Плагин настраиваемых жестов Vue (щелчок, щелчок, длительное нажатие, двойной щелчок, перетаскивание, мультитач, слайд, масштабирование, поворот), основанный наTencent AlloyПалецОбновленная версия vue
Example
1. Нажмите событие
v-tap
2. Событие щелчка, разница с нажатием составляет 250 мс.
v-singleTap
3. Событие длительного нажатия, срабатывающее, когда продолжительность клика превышает 750 мс.
v-longTap
4. Событие двойного щелчка
v-doubleTap
5. Перетащите событие
v-pressMove
6. Стартовое событие мультитач-события
v-multipointStart
7. Завершающее событие мультитач-события
v-multipointEnd
8. Перелистывание событий
v-swipe
9. Событие ротации
v-rotate
10. Масштаб событий
v-pinch
demo
Например, vue-floating — это компонент плавающего окна, сгенерированный с помощью директивы vue-finger в качестве команды жеста.
<div
:style="floatStyle"
class="floating"
v-pressMove="{methods: pressMove, args: 'args' }"
ref="floating"
v-tap="{methods: tap }"
>
methods: {
pressMove(e, args){
},
tap(){
}
}