vue.js项目实战运用篇之抖音视频APP-第九节: 视频上滑下拉播放功能

小程序模仿抖音上下滑动视频 前景知识 要实现小程序类似抖音上下滑动预览视频,就我了解的,方案可以分为两种 1、利用原生组件swiper(据说很卡,我也试过,好像是有点不流畅) 2、自己实现一个上下滑动效果(只需要监听一组事件,判断上拉还是下拉,接着就是移动dom) 这里就采用第二种方案自己实现 ps: (本案例基于字节小程序,由于字节已经实现原生组件同层渲染,所以这里不考虑组件层级问题,如果是其他平台,可能需要结合实际解决同层渲染问题,思路应该是一致的) 先看效果: 开始实现(一) 布局 笔者准备在视频列表外嵌套一个大盒子,这个大盒 阅读详情

【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。
项目地址:GitHub


第九节: 视频上滑下拉播放功能

回顾及介绍

在第五节中我们实现了视频列表及视频播放的组件,在这一章节中将进一步了解上滑、下滑播放视频的实现。
视频播放组件详细地址:common/components/VidoeList。

上滑播放功能

实现的函数如下:

export default {
   
   
  name: 'Videos',
  props: ['video', 'index'],
  data: {
   
   
	on: {
   
   
	 tap: () => {
   
   
            // 播放
            this.playAction(this.page - 1);
          },
          slidePrevTransitionStart
uniapp 开发之仿抖音,上下滑动切换视频、点击小爱心效果 阅读详情

相关推荐

【uniapp】仿抖音上下滑动视频-微信小程序

<template> <view> <view class="swiper"> <swiper class="swiper" :current="1" :circular="true" :vertical="true" @change="changefun" @animationfinish="animationfinishfun" > <swiper-item v-for="(item,index) in PayVideo">

Minions_Fatman的博客 5001

vue3仿抖音视频滑动切换播放

vue3仿抖音视频滑动切换播放

scroll-video:scroll-video微信小程序视频上下滑动播放方案视频滑动播放的两种方案:Swiper + Video,使用Swiper插入视频进行视频播放,小程序v2.4.0起Video组件支持同层渲染,大体思路是保证一个视频组件,记录Swiper的电流,并对swiper-item的下标做比对,来比较当前索引和current是否一致,一致则展示Video组件。滑动效果比较好,还有优化的,怎么预加载,怎么大体思路是固定一个视频组件,将封面图平铺在视频组件上,根据手势滑动的范围,确定上滑或替换

滚动视频 微信小程序视频上下滑动播放方案 视频滑动播放的两种方案: Swiper + Video,使用Swiper合并视频进行视频播放,小程序v2.4.0起Video组件支持同层渲染,大体思路是保证一个视频组件,记录Swiper的电流,并与此swiper-item的下标做比对,来对比当前索引和current是否一致,一致则展示Video组件。 滑动效果比较好,还有优化的,怎么预加载,怎么放置3个Video组件进行预加载的问题。 平移画,模拟上下滚动的效果。大体思路是固定的一个视频组件,把封面图平铺在视频组件上,根据手势滑动的范围,确定上滑或倾斜,通过改变translateY,切换视频源播放。 滑动效果不是很好,无法做到手指跟随。 Vide组件加载视频黑屏慢的可能解决方案 video组件在播放视频的时候会黑屏,或者正在加载时间长,这有几种方案替代参考,排除网络问题。 视频编码格式的问题,将

仿抖音滑动小短剧影视微信小程序源码包含前端+后端+数据库

仿抖音滑动小短剧影视微信小程序源码,带支付收益等模式、支持无限滑动;高性能滑动、预加载、视频预览,支持剧情介绍,集合壁纸另外仿抖音滑动效果;支持会员模式,支持用户单独购买等等多功能 丰富的后台设置,具体大家可以看小编的后台演示图,大家可以自行下载搭建研究前端支持抖音、快手、百度、H5和微信小程序,需要哪个端就发行到哪个端即可。

视觉巡线小车(STM32+OpenMV)——技术总结

在现代机器人技术中,视觉巡线是一种常见的导航方式,它允许机器人通过识别和跟踪地面上的线路来自主导航。本文将总结使用STM32微控制器和OpenMV视觉模块来实现视觉巡线小车的关键技术和步骤。

weixin_66608063的博客 3076

企业级智能问数开发的核心痛点与技术聚焦

本文介绍了企业级智能问数系统开发的三大核心问题和解决方案:语义解析不精准、SQL生成不健壮、企业适配难落地。文章从开发者视角出发,详细拆解了NLU语义解析、SQL生成、对话记忆、企业级适配四大核心模块的技术实现。 在技术选型方面,推荐了LangChain+DeepSeek-R1、FAISS/Milvus、SQLAlchemy等工具链组合。针对企业级需求,重点讲解了: 语义解析模块的意图识别优化和要素提取技术 SQL生成模块的语法校验与性能优化方案 对话记忆模块的Redis存储实现 企业级适配的三层防护体系和

lamehsl的专栏 1046

Rocky Linux 9.0国内yum源一键替换指南(上海交大镜像站实测)

本文详细介绍了如何将Rocky Linux 9.0的yum源替换为上海交大镜像站,以解决国内用户访问官方源速度慢的问题。通过实测验证,上海交大镜像站提供高速下载和稳定更新,并提供了完整的替换步骤、常见问题解决方案及高级优化配置,帮助用户提升软件包下载效率。

weixin_29304985的博客 359

(八)基于MuJoCo的LeRobot SO100仿真操控实战指南(操作优化)

本文详细介绍了如何在MuJoCo仿真环境中搭建并优化LeRobot SO100机械臂的操控。通过两种核心模式(纯键盘仿真与实机镜像同步)的实战演示,重点讲解了关键的参数标定方法,以实现虚拟模型与真实硬件的精准同步。文章还提供了性能优化技巧,旨在帮助开发者构建高效、安全的机器人算法开发与测试流程。

weixin_29083649的博客 317

OpenClaw Windows 安装指南

好的,我来一步一步带你在 Windows 上安装 OpenClaw。

m0_60605453的博客 548

史上最全!研究生科研必备科研工具(含AI科研工具),附使用说明和示例

这些工具在科研中的应用非常广泛,可以帮助研究生更高效地完成研究任务。为了更好地利用这些工具,建议深入学习它们的官方文档和教程,或者参加相关的工作坊和培训。

智能AI让学术科研更容易 3941

第133章 PCL OrientedBoundingBox 有向包围盒

中文叫有向包围盒,是一种旋转过的包围盒。特点:不像AABB那样固定朝向坐标轴能更紧密地包裹物体适用于复杂姿态的物体,比如倾斜、旋转的物体通常通过PCA、惯性矩等算法确定方向。

yumeiguo的博客 263

Unity 面试篇|(六)数据结构和算法篇 【全面总结 | 持续更新】

先拿10000个数建堆,然后一次添加剩余元素,如果大于堆顶的数(10000中最小的),将这个数替换堆顶,并调整结构使之仍然是一个最小堆,这样遍历完后,堆中的10000个数就是所需的最大的10000个。桶排序是计数排序的升级版。它的工作原理:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。这样处理就可以分别在每个文件的10^6个数据中找出最大的10000个数,合并到一起在再找出1000*10000中的最终的结果。

游戏开发小Y的博客 12万+

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

上一篇: vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能
下一篇: lessc : 无法将“lessc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
enjsky.G
博客等级 码龄8年 16粉丝 29原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值