uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果

实现方法：

swiper中嵌套swiper，通过给swiper设置自定义属性，判断数据类型是图片还是视频，从而控制视频自动播放和图片轮播效果:

videoPlayer代码：

<template><video :id="'myVideo'+ video.id" @click="click" @play="changePlay" class="video" :controls="disable" :loop="false":src="video.src" :poster="video.preImg" :show-progress="true" object-fit="fill" :autoplay="autoplay":style="{height:screenHeight+'px', width: windowWidth + 'px'}"></video>
</template><script>export default {props: ['video', "screenHeight", "windowWidth", "autoplay"],name: "videoPlayer",data() {return {play: false,disable: true};},onReady() {this.videoContext = uni.createVideoContext("myVideo" + this.video.id, this)console.log("视频组件onready:");},mounted() {this.videoContext = uni.createVideoContext("myVideo" + this.video.id, this)},methods: {click() {console.log("click", this.video.id, this.play);if (!this.play) {this.playthis()} else {this.pauseVideo()}},playVideo() {if (this.play === false) {console.log("playVideo", this.video.id);this.videoContext.seek(0)this.videoContext.play()this.play = true}},pauseVideo() {console.log("pauseVideo", this.video.id);if (this.play === true) {this.videoContext.pause()this.play = false}},playthis() {// console.log("playthis", this.video.id);if (this.play === false) {console.log("playthis", this.video.id);this.videoContext.play()this.play = true}},changePlay() {console.log("changePlay");this.play = true}}}
</script><style>/*  .video {width: 750rpx;} *//*    .video {height: 100%;width: 100%;z-index: 1;} */
</style>

主代码：

<template><swiper class="swiper" :vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd"><block v-for="item of videoList" :key="item.id"><swiper-item ref="swiperItem" data-type="video" class="swiper-item" v-if="item.type === 'video'"><videoPlayer :video="item" ref="player"></videoPlayer></swiper-item><swiper-item ref="swiperItem" data-type="img" v-else><swiper :style="{height:screenHeight+'px'}" class="img-boxs" circular :indicator-dots="true":autoplay="true" :current="currentImgIndex" @change="changeswiper"><swiper-item v-for="(item, index) in item.imgList" :key="index"><image :src="item" mode="scaleToFill" class="swiper-img" :indicator-dots="true"></image></swiper-item></swiper></swiper-item></block></swiper>
</template><script>import videoPlayer from "./components/videoPlayer.vue"var time = nullexport default {props: ["myList"],components: {videoPlayer,},name: "video-list",data() {return {videoList: [{id: 7,type: "image",imgList: ['https://img-blog.csdnimg.cn/img_convert/4ce460a31366926464acc88c991721d9.jpeg','https://img-blog.csdnimg.cn/img_convert/a8d701d5adc9008ca018905f43c34145.jpeg','https://img-blog.csdnimg.cn/img_convert/3090b46bd91e5c7ee5d78d988fbae0bd.jpeg',"https://img-blog.csdnimg.cn/img_convert/08acb513a12e1d7d654cc43cf4e2ee48.jpeg","https://img-blog.csdnimg.cn/img_convert/eebf7eefba5849ef9788e32c148061c8.jpeg"],}, {id: 1,type: "video",preImg: "http://p1-q.mafengwo.net/s16/M00/8D/4D/CoUBUmFZOWKAA8mQAA8Oww0vs7k240.jpg",src: "https://txmov2.a.yximgs.com/upic/2020/03/14/16/BMjAyMDAzMTQxNjIwMDlfMTI0OTQzNzMzOV8yNDk0OTExNDY1NF8xXzM=_b_B8cf5a4391531e161385a32cdadfef87c.mp4"},{id: 8,type: "image",imgList: ['https://img-blog.csdnimg.cn/img_convert/4ce460a31366926464acc88c991721d9.jpeg','https://img-blog.csdnimg.cn/img_convert/a8d701d5adc9008ca018905f43c34145.jpeg','https://img-blog.csdnimg.cn/img_convert/3090b46bd91e5c7ee5d78d988fbae0bd.jpeg',"https://img-blog.csdnimg.cn/img_convert/08acb513a12e1d7d654cc43cf4e2ee48.jpeg","https://img-blog.csdnimg.cn/img_convert/eebf7eefba5849ef9788e32c148061c8.jpeg"],}, {id: 2,type: "video",preImg: "http://b1-q.mafengwo.net/s16/M00/23/F3/CoUBUmFbN5OAGqEkAA4O0V-U1uo031.jpg",src: "https://txmov2.a.yximgs.com/upic/2020/10/02/09/BMjAyMDEwMDIwOTAwMDlfMTIyMjc0NTk0Ml8zNjk3Mjg0NjcxOF8xXzM=_b_B28a4518e86e2cf6155a6c1fc9cf79c6d.mp4"},{id: 3,type: "video",preImg: "http://p1-q.mafengwo.net/s16/M00/23/F4/CoUBUmFbN5WAbMikAA5cYlWno5U709.jpg",src: "https://txmov6.a.yximgs.com/upic/2020/08/23/00/BMjAyMDA4MjMwMDMyNDRfMTYzMzY5MDA0XzM0ODI4MDcyMzQ5XzFfMw==_b_B9a1c9d4e3a090bb2815994d7f33a906a.mp4"},{id: 4,type: "video",preImg: "http://p1-q.mafengwo.net/s18/M00/E6/C0/CoUBYGFceTyAOSBqABFXcMPFJ1w112.jpg",src: "https://alimov2.a.yximgs.com/upic/2020/03/04/15/BMjAyMDAzMDQxNTU3MTdfMzE3MDM5OTAzXzI0NDUwNjQ1MzgxXzFfMw==_b_B53c20819cb9a2103b9805b0144f545cf.mp4"},{id: 5,type: "video",preImg: "http://p1-q.mafengwo.net/s18/M00/E6/C0/CoUBYGFceTyAOSBqABFXcMPFJ1w112.jpg",src: "https://txmov2.a.yximgs.com/upic/2020/07/14/16/BMjAyMDA3MTQxNjEyNDBfMTU3MDQyNjA0XzMyMzUyOTQ4NzM0XzJfMw==_b_Bd53949260b17aaa7b712526aa61e590a.mp4"},{id: 6,type: "video",preImg: "http://p1-q.mafengwo.net/s18/M00/E6/C0/CoUBYGFceTyAOSBqABFXcMPFJ1w112.jpg",src: "https://txmov2.a.yximgs.com/upic/2020/09/28/15/BMjAyMDA5MjgxNTAwMTlfNjk3OTM4NjUzXzM2NzQyNzU5MzA2XzFfMw==_b_B6e8aca57e704ac40b34856eb663b8d57.mp4"},],screenHeight: 0,currentImgIndex: 0};},mounted() {uni.getSystemInfo({success: (res) => {console.log("首页获取到的页面高度:windowHeight", res.windowHeight);this.screenHeight = res.windowHeight;}});},methods: {change(res) {clearTimeout(time)this.page = res.detail.currentlet swiperPre = this.$refs.swiperItem[this.page - 1]let swiperItem = this.$refs.swiperItem[this.page]let swiperNext = this.$refs.swiperItem[this.page + 1]let currentType = swiperItem.$attrs["data-type"]time = setTimeout(() => {if (this.pageStartY > this.pageEndY) {console.log("向上滑动当前页:" + this.page);console.log("改变当前显示图片索引:", this.currentImgIndex);if (currentType === "video") {swiperItem.$children[0].playVideo()this.pageStartY = 0this.pageEndY = 0} else {console.log("改变当前显示图片索引:", this.currentImgIndex);this.$nextTick(() => {this.currentImgIndex = 0})}if (swiperPre.$attrs["data-type"] === "video") {swiperPre.$children[0].pauseVideo()}} else {console.log("向下滑动" + this.page);console.log("改变当前显示图片索引:", this.currentImgIndex);if (currentType === "video") {swiperItem.$children[0].playVideo()this.pageStartY = 0this.pageEndY = 0} else {console.log("改变当前显示图片索引:", this.currentImgIndex);this.$nextTick(() => {this.currentImgIndex = 0})}if (swiperNext.$attrs["data-type"] === "video") {swiperNext.$children[0].pauseVideo()}}}, 1)},touchStart(res) {this.pageStartY = res.changedTouches[0].pageY;console.log(this.pageStartY);},touchEnd(res) {this.pageEndY = res.changedTouches[0].pageY;console.log(this.pageEndY);},changeswiper(e) {this.currentImgIndex = e.detail.current}},watch: {myList() {this.list = this.myList;}}}
</script><style>.swiper {width: 100vw;height: 100vh;}.swiper-item {width: 100vw;height: 100vh;z-index: 9;}.swiper-img {width: 100%;height: 100%;}.img-boxs {/* height: 100%; */}/*  .left-box {z-index: 20;position: absolute;bottom: 50px;left: 10px;}.right-box {z-index: 20;position: absolute;bottom: 50px;right: 10px;} */
</style>

uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果相关推荐

uniapp移动端nvue使用swiper实现图片和视频切屏，图片轮播，类似抖音效果
上一片讲的代码只能h5端生效,嗨,晦气因为移动端使用的nvue,所以不能用block标签,而且不能使用百分比布局,所以......出现的问题还是很多的,要给标签动态设置高度,不然占不满屏幕: 直接上 ...
uni-app视频加图片轮播
uni-app视频加图片轮播,适用小程序.app.H5 下面是具体代码代码片. <template><view class="screen-swiper"> ...
js特效之腾讯视频的图片轮播
今天搞了一天的javascript,准备做一个特效图片轮播,现在晚上十二点,中午十二点我开始搞的,到了现在还没有搞好还差一个鼠标移进移出的暂定和播放,其实这是一个很简单的特效,就是从刚开始的css的布 ...
c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果
插件描述:jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码. 响应式触摸滑块 Javascript/css3 滑块 HTML This is a title This ...
15款jQuery带缩略图的图片轮播切换特效代码
JQuery宽屏电影大图幻灯片轮播切换代码 jquery带文字缩略图的图片轮播切换代码 jQuery OwlCarousel图片滚动插件世界杯图片轮播滚动代码 jQuery仿中国建设银行带缩略图控制滚 ...
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（三）
jquery banner滑块导航条幻灯片轮播图片滚动 jQuery blockSlide插件熔岩灯标签导航banner焦点图片切换 jquery图片冒泡插件鼠标悬停图片冒泡动画展示 jquery h ...
前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色、复选...）
GitHub 地址支持视频.图片上涂鸦,做标记画板功能支持矩形.圆形.椭圆.箭头.直线.文本,支持缩放.修改.调整字号颜色.移动位置....,画板数据支持上传保存,后续传入重新复原. 画板 ...
菜鸟笔记---axure9 动态面板移动端上下滑屏
在网上找了好久如何实现原型手机端上下滑动,各种攻略看的呀,方法都不一样,版本也不一样,试了半天都没成功,看的多了,知道个大体动态面板的操作路径了,才最终成功.(成功1.0,实现了滑动,但是细节控制的不 ...
EasyNVR分屏切换时视频源丢失问题的优化分享
EasyNVR视频平台能够进行多线程直播,新版更新的视频分屏功能也让多线程直播更加直观.经常有用户问我们最大能接入多少路视频流,其实这个是不固定的,具体还是要根据现场的网络和服务器来看.EasyNVR ...

uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果

uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果相关推荐

最新文章

热门文章