возобновить
Адрес github и gif эффекта теперь обновлены, что можно посмотреть в конце статьи. Если мой код полезен для вас, пожалуйста, помогите мне пометить его звездочкой.
нужно
В последнее время в проект необходимо добавить функцию.В апплете существующую функцию короткого видео можно просматривать способом Douyin.
идеи
1. Добавьте монитор времени в тег видео. 2. Если 1 не получается, поставить обложку на видео и добавить мониторинг времени на обложку. 3. Если два вышеуказанных метода не работают, используйте функцию обработки страницы onPageScroll апплета для отслеживания прокрутки страницы. 4. Если ни один из трех вышеперечисленных методов не работает, используйте холст, чтобы закрыть видео и прослушать события прокрутки.
пытаться
Теперь прослушиватель событий касания добавлен к тегу видео, но событие касания не может быть успешно обнаружено. Т.к. видео является нативным компонентом и имеет высокий уровень, то я пытался накрыть его кавер-вью и слушать события прокрутки, но слушать тоже было невозможно.
Первые два метода не работают, поэтому я использую onPageScroll, чтобы следить за тем, прокручивается ли страница. Этот метод получит расстояние, на которое текущая страница была прокручена в вертикальном направлении. scrollindex используется для управления прокруткой, totalNum - общее количество прокруток, часть кода выглядит следующим образом
Он может удовлетворить потребности на ios, может прокручивать вверх и вниз и может добавлять анимацию, но на Android он не может двигаться.Я пытался настроить прокрутку в файле json страницы, но нет возможности, поэтому этот метод не работает. не работа.
В итоге есть только один способ это сделать.Расположить холст на видеокомпоненте и добавить на него монитор времени.Это успешное открытие.Вы можете увидеть распечатанный монитор на консоли. приставка.
выполнить
wxml: Ниже приведен код wxml. Основная идея состоит в том, чтобы сделать ширину и высоту видео равными размеру экрана, лайкать, комментировать, делиться и другие функции. Используйте обложку, чтобы найти верхнюю часть видео. холст позиционируется на видео, прокрутка — это шаблон обложки и тег видео, есть только один, прокрутка меняет src видео.
wxss: это все стили, связанные с позиционированием, которые не будут отображаться без специальных стилей. Тем не менее, когда я это делаю, здесь есть яма.Продукт надеется добавить бесконечное слайд-видео вниз, которое можно загружать бесконечно, поэтому в начале я использовал анимационную анимацию и добавлял анимацию вверх или вниз в соответствии с пальцем на каждом Я не мог этого сделать, а позже обнаружил, что могу использовать API апплета, wx.createAnimation(), чтобы реализовать его в js.
js: при загрузке this.animation = wx.createAnimation(); используется для создания анимации при переключении.
Прокрутите события для прослушивания
Что js в основном делает, так это оценивает направление прокрутки и динамически добавляет анимацию в wxml с помощью метода анимации, предоставляемого WeChat, чтобы можно было реализовать требование бесконечной загрузки. Функция scrollTop заключается в корректировке положения тега видео, поскольку обложка видео не является самим видео при добавлении прокрутки, и видео необходимо скрыть.Если вы используете элемент управления wx:if; приведет к тому, что видео будет скрыто и не сможет отображаться после его отображения. Прослушивайте ранее добавленные события.
Эффект
Это может повлиять на реальную машину. Я записал видео на мобильный телефон и не знаю, как его загрузить. Я не могу найти, как передать его на Mac, когда конвертирую gif. . .
Гифка обновлена, но она кажется немного застрявшей, не такой плавной, как на мобильном телефоне. iOS также намного плавнее, чем Android. Но это более плавно, чем эта картина. . . А сейчас адреса видео все обвешаны, поэтому я продолжаю крутить и буферизовать, а воспроизвести только эту картинку нет возможности, она будет воспроизводиться после того, как закончится нормальная буферизация.
наконец
Долго вытаскивал.Эффект реальной машины и симулятора сильно отличается.Лучше всего тестировать на реальной машине. В настоящее время я не знаю, есть ли лучший способ, интерфейс новичка ~
Пополнить
Введите контактxgy19930314@163.com, адрес гитхаба:GitHub.com/Сюй Гои/Я думаю…