uniapp - 完美解决 ＜swiper＞ 嵌套 video 视频时卡顿不流畅问题，swiper滑块视图容器里面包含视频播放器和图片共存时滑动切换特别卡，滑动不流畅问题的解决方案（保证解决此问题）

已于 2024-05-10 09:50:02 修改
阅读量4k 收藏 4
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： uniapp swiper滑块视图容器组件 swiper嵌入视频卡顿 swiper轮播图片和视频卡 swipe组件不流畅太卡怎么办 uni官方解决swiper卡顿 如何解决swiper轮播视频卡
于 2023-10-14 14:44:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/133825012
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
166 篇文章 1083 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
76 篇文章 42 订阅 ¥9.90 ¥99.00
订阅专栏

效果图

在uniapp项目开发中，swiper组件内有多个视频、图片和视频混合时会出现滑动不流畅卡顿问题，并且视频自动轮播时没等看完视频就轮播走了。

uniapp Vue3和Vue2都能用，解决方案全端（H5网页/小程序/app安卓苹果等）兼容适用，uview组件库同理也能用，保证解决卡顿不流畅的问题。

在这里插入图片描述

问题分析

先来

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp小程序中使用video视频播放卡顿
m0_61476911的博客
04-10 662
uniapp小程序中使用video视频播放会出现异常卡顿现象
微信小程序 swiper 组件遇到的问题及解决方法
01-03
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ swiper 组件高度被限制为150px了，所以内容无法撑开。 解决办法 给这组件重新设置个高度，然后在把里面的图片设置为自动适应容器大小。图片模式设置为 宽度不变 自动适应高度 <swiper class=test> <swiper> <image mode='widthFix'> </swiper-
uni-app APP端video组件播放视频卡顿
Rae_1999的博客
05-27 4907
项目场景： 提示：这里简述项目相关背景： app 的一个上传视频，然后预览 的基础功能 问题描述 提示：这里描述项目中遇到的问题： 视频可以正常上传，预览的时候无法预览。复制视频的连接，在浏览器上可以正常预览。 但在video组件中，组件中出现一直加载中的样式，视频也无法播放。 解决方案： 使用web-view内嵌网页播放视频 在展示视频列表的页面做一个页面跳转 <view v-for="(item,index) in videoList" :key="index" @click="prev
【uniapp的swiper里 包含video】uniapp的swiper里 包含video，解决滑动不流畅问题
weixin_48596030的博客
10-24 3633
【uniapp的swiper里 包含video】uniapp的swiper里 包含video，解决滑动不流畅问题
小程序开发使用weui无效解决方法，<swiper>标签中传入多个数组型数据 ... .
03-29
一：公众号及小程序开发使用weui无效解决方法   分享者：lijie627239856，原文地址  在开发微信公众号过程中,对于不熟悉前端的童鞋们来说,  明明引用了css文件,可以就是没有实际效果,瞬间懵逼  其实这个是微信官方文档weui中的BUG,给出的类名全部是以下这种形式   <a>按钮</a> 实际上,应该是这样的!   <a>按钮</a> 注意:类名中的
uniapp中swiper的大坑，在swiper-item中嵌套video在移动端无法实现上下滑动的，要用nvue代替，从而实现抖音滑视频效果
07-25 7666
在移动端的时候，就会出现虽然切换到第二个视频了，声音也出来了，但是画面就是没有动。研究了一天，发现在swiper-item中嵌套视频时，移动端只能滑动切换背景，视频在原位置是不会动的。那就只能这么写了，为什么不动态设置宽度呢？为移动端创建单独的页面包括视频组件也是要单独创建一个nvue的。想做一个抖音滑屏切换视频的效果，结果。为什么要动态设置这个高度呢？使用nvue的教程；......
uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果
07-27 5406
代码】uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果。
微信小程序swiper上下滑动卡顿
努力的nana
09-17 3103
效果：页面上下滑动，类似H5 当滑动的内容过多时，下方的内容会被遮盖，此时滑动会不流畅。 原因：内容的滑动和swiper的滑动有冲突 解决办法：在swiper-item中嵌套一个scroll-view // DOM <swiper class="swiper" :vertical="true" :current="currentTab" @change="handleChangeTab"> <swiper-item> <A/> </swiper-item
uni-app，swiper轮播图片加视频卡顿问题
luozaiyong的博客
03-09 1265
uni-app，swiper 包涵video标签滑动卡顿问题
uniapp-视频图片轮播图
weixin_60020621的博客
08-15 956
自己封装uni轮播图，超过一页，视频就不能播放了，uview提供的轮播图在真机测试时，视频页不能滑动。找了一个大佬的文章，改了点样式，直接就能用。
scroll-video:scroll-video微信小程序视频上下滑动播放方案视频滑动播放的两种方案：Swiper + Video，使用Swiper插入视频进行视频播放，小程序v2.4.0起Video组件支持同层渲染，大体思路是保证一个视频组件，记录Swiper的电流，并对swiper-item的下标做比对，来比较当前索引和current是否一致，一致则展示Video组件。滑动效果比较好，还有优化的，怎么预加载，怎么大体思路是固定一个视频组件，将封面图平铺在视频组件上，根据手势滑动的范围，确定上滑或替换
03-23
滚动视频 微信小程序视频上下滑动播放方案 视频滑动播放的两种方案： Swiper + Video，使用Swiper合并视频进行视频播放，小程序v2.4.0起Video组件支持同层渲染，大体思路是保证一个视频组件，记录Swiper的电流，并与此swiper-item的下标做比对，来对比当前索引和current是否一致，一致则展示Video组件。 滑动效果比较好，还有优化的，怎么预加载，怎么放置3个Video组件进行预加载的问题。 平移画，模拟上下滚动的效果。大体思路是固定的一个视频组件，把封面图平铺在视频组件上，根据手势滑动的范围，确定上滑或倾斜，通过改变translateY，切换视频源播放。 滑动效果不是很好，无法做到手指跟随。 Vide组件加载视频黑屏慢的可能解决方案 video组件在播放视频的时候会黑屏，或者正在加载时间长，这有几种方案替代参考，排除网络问题。 视频编码格式的问题，将
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
01-03
微信小程序 开发之滑块视图容器详解 实现效果图： 实现起来特别简单，看看代码是怎么写的呢： <swiper class=swiper indicator-dots={{indcatorDots}} autoplay={{autoPlay}} interval={{interval}} duration={{...
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
04-15
uniapp swiper 图片高度根据图片宽度自适应； 通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果； 滑动到某个要素位置时触发事件，如tab选项卡值更改等
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
最新发布
09-11
可移动的视图容器，在页面中可以拖拽滑动或双指缩放。 movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动
swiper-video:用react和antd-mobile实现类似抖音上下滑动视频的效果
05-06
在h5中实现一个类似于抖音中可以上下滑动观看视频的效果。 将自己工作中经常碰到的组件归类 2、依赖 react， antd-mobile, axios 3、启动项目 npm install cd app npm run start / npm run build 4、视频数据来源 ...
微信小程序swiper使用网络图片不显示问题解决
10-15
主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
uniapp微信小程序视频播放卡顿
m0_55258023的博客
10-24 3833
uniapp微信小程序视频播放卡顿
uni-app swiper里包含video，滑动不流畅问题的解决方案
忒不靠谱儿
06-01 6329
场景：轮播里要有图片还要有视频,轮播用的是swiper，视频播放用的是video。滑起来卡的不要不要的。 解决的想法： 第一步：一进入swiper自动轮播this.autoPlay=true ，视频video上面覆盖一层，再cover-view放个播放按钮，不显示video的播放按钮:show-center-play-btn=“false”，不显示video的默认播放控件（播放/暂停按钮、播放进度、时间）:controls=“controls” controls:false。 第二步：点击cover-vi
请解释<view class="swiper-container"> <!-- <swiper indicator-dots autoplay circular> --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> <block wx:for="{{swiperList}}"> <swiper-item> <navigator url="{{item.url}}"> <image src="{{item.image}}" mode="scaleToFill"></image> </navigator> </swiper-item> </block> </swiper> </view>
06-10
这是一个微信小程序的代码片段，用于实现轮播图的功能。具体解释如下： - `<view class="swiper-container">`: 定义一个视图容器，类名为swiper-container，用于包裹轮播图的内容。 - `<swiper>`: 定义轮播图组件，包括以下属性： - `indicator-dots`: 是否显示指示点，默认值为false，表示不显示。 - `autoplay`: 是否自动播放，默认值为false，表示不自动播放。 - `interval`: 自动播放间隔时间，单位为毫秒，默认值为5000。 - `duration`: 滑动动画时长，单位为毫秒，默认值为500。 - `circular`: 是否启用无限轮播，默认值为false，表示不启用。 - `<block wx:for="{{swiperList}}">`: 循环遍历轮播图列表，其中swiperList是一个数组，包含多个轮播项。 - `<swiper-item>`: 轮播图项，包含一个`<navigator>`和一个`<image>`标签，用于显示图片和跳转链接。 - `<navigator>`: 点击图片时跳转到的页面链接。 - `<image>`: 轮播图图片，其中`src`属性表示图片的路径，`mode`属性表示图片的显示模式，这里设置为`scaleToFill`表示缩放图片以填充整个容器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值