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和微信小程序,需要哪个端就发行到哪个端即可。

避坑指南:Unity新版InputSystem在移动端的5个常见问题及解决方案

本文针对Unity新版InputSystem在移动端开发中的常见问题,提供了5个关键解决方案,包括虚拟摇杆灵敏度调节、多点触控冲突处理、按钮反馈延迟优化、手势识别与陀螺仪数据融合以及Android/iOS平台差异处理。这些实战经验帮助开发者高效解决触控适配难题,提升移动游戏体验。

soda5的博客 404

拯救我的老平板三星note8.0 table(GT-N5110)升级到lineage os-14.1(android7.1)全记录

买了多年的三星平板note8.0已经闲置了一段时间,今天在家不能出门,也没啥事,就把它拿出来刷新系统。不成想居然搞了一天,还差点变成了砖。 原版的系统是安卓4.0的系统,很多软件已经不能用了,微信、优酷都不支持,而且三星也不提供更新升级,于是寻求第三方解决方案。折腾过程一波三折,就不赘述了,我就讲一下正确的操作过程吧。 切记我这里讲的过程只针对三星note8.0 table,国行版本,版本号是...

weixin_41108814的博客 2万+

DCDC--控制方式(Control Mode)

DCDC反馈控制方式

网始如芯个人博客 1万+

Win11下CH340串口识别失败的终极排查指南:从驱动更新到硬件电路检查

本文提供了Windows 11系统下CH340串口芯片识别失败的全面排查指南。从驱动更新、系统设置等软件层面入手,逐步深入到USB线缆、电源测量等硬件连接检查,并重点剖析了硬件设计细节,如电源退耦电容容值对设备描述符请求的关键影响,最终帮助开发者系统性地定位并解决识别难题。

weixin_29174013的博客 587

告警不是闹钟:AI 如何把告警过滤成真正的“求救信号”?

告警不是闹钟:AI 如何把告警过滤成真正的“求救信号”?

Echo_Wish 240

HBase学习二:RegionServer详解

RegionServer是HBase系统中最核心的组件,主要负责用户数据写入、读取等基础操作。RegionServer组件实际上是一个综合体系,包含多个各司其职的核心模块:HLog、MemStore、HFile以及BlockCache。一个RegionServer由一个(或多个)HLog、一个BlockCache以及多个Region组成。其中,HLog用来保证数据写入的可靠性;BlockCache可以将数据块缓存在内存中以提升数据读取性能;

qwerty1372431588的博客 747

高分SCI讨论部分必学AI写作套路!仅需五步结合GPT‑5辅助,让你的SCI论文更有说服力(附实用AI提示词)

对于很多写SCI论文的学术人来说,其实“讨论部分”才是最致命的,网上虽然有大量的写作技巧和模板提供参考,但往往让人眼花缭乱,还是不知道如何下手。即便是下手了,也很难兼顾学术性与可读性,实际上讨论部分的难点并不在于写,而在于你能研究结果说清楚。今天七哥教你借助GPT-5,用五步法结合精心设计的AI提示词,让你能在科学逻辑与语言表达上一次性解决“讨论部分”的结构、内容、润色和翻译问题,轻松写出符合高分SCI期刊要求的讨论段落。

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

一文探讨视频秒开:m3u8视频格式与视频秒开优化

秒开指的是,一秒内成功加载的播放数/播放总数。本意是想对比一下m3u8与mp4视频格式,并了解m3u8格式优缺点,以确定一个大概优化方向。但对m3u8做简单了解后,觉的m3u8可能是一个优化方向。

bjxiaxueliang的CODING小栈 2万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

上一篇: 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、付费专栏及课程。

余额充值