草庐IT

uniapp-app的视频轮播图

楚城相拥 2023-09-30 原文

直接使用swiper做图片轮播图是没有问题的,视频轮播图的兼容性仅仅体现在APP上。

我的方法是将nvue页面作为视频的遮罩层,如果直接将视频放到nvue页面,说不定也可以。其实这个兼容性的关键在于video标签在手机上的层级过高,除了nvue,还有其他方法解决。

因为我的这个项目是图片,视频混合的轮播图,所以很多地方要判断,是否为视频,但测试时,第一项就是视频,所以很多地方判断,swiper的current是否为0。

pages/my/person.vue

<view class="person-head">
	<swiper :current="swiperNum" @change="switchItem" circular indicator-dots 
         v-if="isVideo">
	    <!-- v-for循环遍历数组 -->
		<swiper-item v-for="item in list4">
			<image :src="item.url"></image>
		</swiper-item>
	</swiper>
	<view  v-if="!isVideo">
		<video id="myVideo" src="https://cdn.uviewui.com/uview/resources/video.mp4" 
         autoplay="true" style="width: 100%;height: 442rpx;" :controls="false" 
         :enable-progress-gesture="false">
        </video>
	</view>
</view>

//因为nvue层级很高,如果页面很长,能上下滑动。那nvue还是始终定在屏幕上方,
//用@touchend监听手指滑动,获得这个元素距离屏幕顶端的距离,以此让nvue高度变化。
<view class="person-body" @touchend="log" id="demo">
</view>

//<script>
    //在这里定义,因为很多地方都用到了。获取nvue页面
    const subNvue = uni.getSubNVueById('popup'); //获取
	//export default {


list4: [{
	url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
	title: '身无彩凤双飞翼,心有灵犀一点通'
	}, {
	url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
	}, {
	url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	title: 'image'
}],
isVideo: true,
swiperNum: 0,


onLoad(e) {

	// 监听事件  ,监听nvue页面传过来的
	uni.$on('getNvue', (direction) => {
			//因为一旦监听这个事件,代表在左右滑动(切换轮播),所以让视频和遮罩层隐藏
            //因为这里只有第一个是视频,实际要根据情况
			this.isVideo = true
			subNvue.hide()
            //根据是左滑,还是右滑,切换轮播图
			if (direction.elePosition == "left") {
				if (this.swiperNum >= this.list4.length - 1) {
					this.swiperNum = 0
				    console.log(this.swiperNum)
				} else {
					this.swiperNum += 1
					console.log(this.swiperNum)
				}

			} else if (direction.elePosition == "right") {
				if (this.swiperNum <= 0) {
					this.swiperNum = this.list4.length - 1
				} else {
					this.swiperNum -= 1
				}
			}

		})
	},
	onUnload() {
		//要在页面关闭的时候, 移除监听事件 ,隐藏遮罩层 
		uni.$off('getNvue');
		subNvue.hide()
	},
	onShow() {
		// 因为这里只有第一条是视频,所以检测swiper的页数是0时, 显示nvue页面
        //要根据实际情况判断
		if (this.swiperNum == 0) {
			subNvue.show() // 显示
		}

		// 因为switchItem事件,是轮播图切换时才会触发,这里考虑到第一个是视频的情况
		this.$nextTick(() => {
			this.switchItem()
			console.log(222)
		})
	},

	methods: {
       //获得元素距离屏幕顶端的距离,计算nvue需要移动的距离,通过setStyle方法移动
       log(e) {
			setTimeout(() => {
				let query = uni.createSelectorQuery().in(this);
				query.select('#demo').boundingClientRect(data => {
					console.log('元素距离顶部的距离' + data.top)
					let top = data.top>=0&&data.top<=212? 0-Math.trunc(212- 
                    data.top):-282
					const subNvue = uni.getSubNVueById('popup'); //获取
					subNvue.setStyle({"top": top+'px'})
				}).exec();
			}, 300)

		},

		//轮播图切换
		switchItem(obj) {
			console.log(obj)
			// 因为测试的数据第一项是视频,所以这里是0
			if (obj == undefined || obj.detail.current == 0) {
				subNvue.show()
				this.isVideo = false
				this.swiperNum = 0 //这个也要改成视频的index
			} else {
				this.isVideo = true
			}
			console.log(this.swiperNum)
  		},
    }


    .person-head {
		height: 500rpx;
		background-color: #000;
	}

 这是person页面轮播图视频部分的遮罩层(这个页面是透明的,可以设置背景色,方便调试)。
 因为直接用swiper轮播视频,两者底层逻辑之间有bug,h5端运行没问题,但真机测试有很多 
 bug,兼容性问题。
    
 bug之一,video的层级太高,导致视频,左右滑动触发不了swiper的切换。
 且video标签检测不到@touchstart,@touchstart等事件,也就判断不了左右滑动。

    
  解决:nvue(只有在手机上nvue才有效果)的层级比video还高,
  用nvue给video做遮罩层,监测在遮罩层上的滑动方向,判断左滑右滑,以此修改轮播图的页数

pages/my/subNVue/video.nvue

<template>
	<view id="popup">
		<view class="mask" @click="log" @touchstart="touchStart" @touchend="touchEnd">
			
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				startTime: 0,
				startPosition: 0,
				endPosition: 0,
			}
		},
		methods: {
			
			// 起点
			touchStart(event) {
				this.startTime = Date.now()
				this.startPosition = event.changedTouches[0].screenX
			},
			// 终点,计算移动距离
			touchEnd(event) {
				
				const endTime = Date.now()
				if (endTime - this.startTime > 2000) {
					return;
				}
				this.endPosition = event.changedTouches[0].screenX
			
				//当移动距离超过10时判断左滑右滑。
				if (Math.abs(this.endPosition - this.startPosition) > 10) {
					this.endPosition = event.changedTouches[0].screenX
					var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
				} else {
					return;
				}
			
                //将左滑还是右滑,传到父页面
				console.log(elePosition)
				uni.$emit('getNvue', {elePosition:elePosition});
			},
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		position: relative;
		width: 750rpx;
		height: 440rpx;
		background: rgba(0,0,0,0);
	}
</style>

pages.json

添加subNVues,id名要和nvue最外层的view标签的id保持一致。

{
	"path": "pages/my/person",
	"style": {
		"navigationBarTitleText": "个人主页",
		"app-plus": {
			"subNVues": [{
				"id": "popup", // 唯一标识  
				"path": "pages/my/subNVue/video", // 页面路径  
				//"type": "popup",  //原生子窗口内置样式,可取值:'popup',弹出 
                //层;"navigationBar",导航栏
					style": {
					"position":"absolute",
					"height": "442rpx",
                   //只能用transparent使nvue页面透明,其他方法会有bug
                   //测试时可以改为其他颜色,方便观察
					"background": "transparent"  
				}
			}],
			"scrollIndicator": "none",
			"bounce": "none",
			"backgroundColor": "#FFFFFF",
			"titleNView": false
		},
		"enablePullDownRefresh": false
	}
},

有关uniapp-app的视频轮播图的更多相关文章

  1. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  2. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  3. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时,API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名,以便它在GitHub上正确呈现。更好的是,我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作?是否有某个地方可以查找可以修改的主页文件的名称?还是我必须编写一个新的Rake任务?额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么?为什么不只有一个?

  4. ruby - 使用 postgres.app 在 rvm 下要求 pg 时出错 - 2

    我正在使用Postgres.app在OSX(10.8.3)上。我已经修改了我的PATH,以便应用程序的bin文件夹位于所有其他文件夹之前。Rammy:~phrogz$whichpg_config/Applications/Postgres.app/Contents/MacOS/bin/pg_config我已经安装了rvm并且可以毫无错误地安装pggem,但是当我需要它时我得到一个错误:Rammy:~phrogz$gem-v1.8.25Rammy:~phrogz$geminstallpgFetching:pg-0.15.1.gem(100%)Buildingnativeextension

  5. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  6. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像,并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时,是将这组图像视为MJPG流。我需要转换一组PNG图像到视频,FFMPEG就不认了。pyav内置了ffmpeg库,不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  7. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  8. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID? - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它,以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7,这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  9. ruby - 为 capybara 设置 app_host 的内容 - 2

    我的测试尝试访问网页并验证页面上是否存在某些元素。例如,它访问http://foo.com/homepage.html并检查Logo图像,然后访问http://bar.com/store/blah.html并检查页面上是否出现了某些文本。我的目标是访问经过Kerberos身份验证的网页。我发现Kerberos代码如下:主文件uri=URI.parse(Capybara.app_host)kerberos=Kerberos.new(uri.host)@kerberos_token=kerberos.encoded_tokenkerberos.rb文件classKerberosdefini

  10. ruby - 导轨 3 : Creating app with internal plugin system - 2

    我想在Rails中使用插件系统创建一个应用程序。潜在用户应该能够上传(或更好地从存储库安装)一个插件并安装它,使我的应用程序能够做更多的事情。这应该在没有FTP/SSH/对服务器的任何低级别访问的情况下完成。关于如何在Rails3中完成它,是否有任何好的gems或教程? 最佳答案 你看过http://edgeguides.rubyonrails.org/plugins.html了吗??它似乎不是100%兼容Rails3,但它可以帮助您入门。我看过的大多数插件文章都涉及Rails2。 关于

随机推荐