Очки знаний:
Есть два знания о подвесном шаре:
1) Одним из них является эффект всасывания краев. Оценка позиции, а затем переход к целевой позиции:
Получить свойство позиции элемента: this.$refs.refNamexxxx.getBoundingClientRect()
2) Один из них — скрыть антивибрацию плавающего шарика при прокрутке страницы.
Идеи реализации:
1. Получите Document.docenteLement.Clientwidth и Clientheight в созданном (вставьте разницу между документом знаний. Документ.
2. Установите начальное положение в смонтированном и привяжите события touchstart touchmove touchend и window.scroll плавающего шара.
3. В touchstart установите запрет на щелчок, чтобы избежать конфликта между событиями касания и щелчка, и установите переход на none, поскольку при движении пальцем не требуется эффект смягчения.
4. В touchmove установите плавающий шар, чтобы он следовал за перетаскиванием пальца, чтобы изменить положение в режиме реального времени, и здесь вы можете настроить плавающий шар, чтобы он реагировал на клики.
5. В touchend сначала определите, можно ли щелкнуть плавающий шар, как упоминалось выше, чтобы избежать конфликта между событиями касания и щелчка. Затем измените переход на все 0,3 с, чтобы остановить эффект смягчения действия всасывания края после перетаскивания. Последнее, что нужно сделать, это выполнить действие всасывания и установить левую верхнюю часть подвесного шара в качестве целевого положения.
6. Во время процесса прокрутки страницы операция скрытия подвесного шара заключается в том, чтобы скрыть подвесной шар в прокрутке, а затем выполнить анти-дрожание в прокрутке и подождать, пока прокрутка остановится в течение 200 мс, а затем выполнить приостановку. дисплей ответа на мяч.
7. И последнее, но не менее важное: не забудьте удалитьEventListener в beforeDestroy и будьте программистом с хорошими привычками от начала до конца.
reference
сегмент fault.com/ah/119000002…