vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题

做项目的时候发现一个问题，swiper视频与图片轮播切换时在ios上切换很流畅，但是安卓手机就很卡顿，想办法解决了半天，百度了半天，好像也没人遇到，就记录下想到的一种解决方案

功能：顶部有视频和图片的轮播图切换，无自动轮播，手动滑动切换
操作：发现视频与下一张图片切换时，视频的当前画面会卡顿
解决：触发滑动事件的时候，把视频标签隐藏，换成图片进行切换

具体代码

html

<div class="mySwiper"><swiperref="mySwiper" style="height:9rem;" :options="swiperOptions"><swiper-slide v-for="item in mySwiper1" :key="item.id"><div class="videoDiv" v-if="item.type==1 && video && video.length > 0" style="height:9rem;"><video v-if="videoShow" x5-playsinline playsinline webkit-playsinline class="ou"  @click="zanting()" :src="video" id="video" style="width:100%;height: 100%;object-fit:fill;webkit-playsinline='true';playsinline='true'" :poster="videoImg"></video><div v-if="videoShow" id="play" class="play" @click="vioplay()"><img src="../assets/img/play.png" style="width:100%;height: 100%;"/></div><img v-else :src="videoImg" style="width:100%;height: 100%;"/></div><img v-else :src="item.imageUrl" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper>
</div>

vue中

var _this;
export default {name: "page2",data() {return {videoShow: true,// 控制显示视频还是隐藏id: this.$route.query.id,swiperOptions: {pagination: {el: ".swiper-pagination"},on:{slideChange: function(){console.log('改变了，activeIndex为'+this.activeIndex);if(this.activeIndex==0){// 当切换到第一个位置时，也就是视频时，显示视频_this.videoShow = true;$(".swiper-pagination").css("display", "none");// 隐藏swiper切换的点点}else{// 当切换到不是第一个位置时，也就是图片时，隐藏视频且将视频暂停_this.videoShow = false;_this.zanting();$(".swiper-pagination").css("display", "");// 显示swiper切换的点点}}}},mySwiper1: [],videoImg: "",video: "",};},methods: {//video playvioplay: function() {var video = document.getElementById("video");video.controls = "controls";video.play();$(".play").css("display", "none");$(".swiper-pagination").css("display", "none");},//video zantingzanting: function() {var video = document.getElementById("video");if(!video) return;video.controls = null;video.pause();$(".play").css("display", "block");},loadData: function() {this.$api.post("api/dest/particulars", { id: this.id }, obj => {obj = obj.data;if (obj) {this.video = obj.video;this.videoImg = obj.videoImg;if(this.video && this.video.length > 0){// 将视频放入轮播图列表中mySwiper1中第一位this.mySwiper1.push({id:-1,type:1});}}});//头部图片this.$api.post("api/public/banners", { type: "06", id: this.id }, obj => {obj = obj.data;if (obj.length == 0) {obj = [{id: 1,imageUrl: require("@/assets/img//onerror375x160.png")}];}for(var o of obj){this.mySwiper1.push(o);}});}},mounted: function() {this.loadData();this.loadImg();},created() {_this = this;}
};

css

// 播放按钮的样式
.play {width: 2.5rem;height: 2.5rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 9999;
}

代码还有待优化，但是解决了明显卡顿的问题就先贴出来记录一下

vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题相关推荐

Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
（三）Vue项目——微商城：首页页面，轮播图+九宫格访问按钮
目录首页 1.显示轮播图 2.服务器返回轮播图数据 3安装axios 4从服务器获取数据 5快速访问按钮首页 1.显示轮播图 src\pages\Home.vue <template> ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
vue项目中使用swiper实现中间大，两边小的轮播图
前言项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来实现效果如下: 下面我们来看下实现步骤: 第一步:首先在项目index.h ...
vue项目中swiper动态更新后无法轮播问题附带案例代码
swiper是很常用的一个组件,我项目中用到的版本是4.1.6.刚开始,我就按照官网的案例写了个demo,当然图片都是静态写死的,确实可以轮播了,但是我项目的需求是要动态修改轮播图的内容.然后我就改成 ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，
vue项目中,使用微信js-sdk打开微信内置导航,唤醒第三方导航一.准备工作二.开发须知三.开始安装sdk 四.通过微信的config接口注入权限验证配置附上代码最近在搞vue项目需要在手 ...
Vue 项目中各种痛点问题及方案
作者:愣锤原文:https://juejin.im/post/6844903632815521799 最近要求使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中 ...

vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题

vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题

做项目的时候发现一个问题，swiper视频与图片轮播切换时在ios上切换很流畅，但是安卓手机就很卡顿，想办法解决了半天，百度了半天，好像也没人遇到，就记录下想到的一种解决方案

具体代码

vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题相关推荐

最新文章

热门文章