uniapp带视频和图片的轮播swiper

uniapp带视频和图片的轮播swiper

<view class="carousel">
			<swiper @change = "swiperChange" indicator-dots circular="true" duration="400" autoplay="true">
				<swiper-item v-if="goodsData.picVideo"> <!-- @click="showVideo" :style="showFullVideo==true?'display:none':'display:block'" class="swiper-item" -->
					<!-- MP-WEIXIN -->
					<!-- #ifdef MP-WEIXIN -->
						<video id="firstVideo" @pause="videoPause" v-if="goodsData.picVideo&&showFullVideo==true" direction=0 style="width: 100%;height: 722upx;z-index:9999" mode="widthFix" :src="goodsData.picVideo"></video>
					<!-- #endif -->
					<!-- #ifdef H5 -->
						<video id="firstVideo" :enable-progress-gesture="false" :poster="goodsData.picVideo+'?vframe/jpg/offset/1'" :autoplay="true" @pause="videoPause" v-if="goodsData.picVideo&&showFullVideo==true" direction=0 style="width: 100%;height: 722upx;z-index:9999" mode="widthFix" :src="goodsData.picVideo"></video>
					<!-- #endif -->
				</swiper-item>
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image v-if="item.src.indexOf('.mp4')==-1" :src="item.src" class="loaded" mode="aspectFill"></image>
						<!-- <video v-if="goodsData.picVideo" style="width: 18.8rem;height: 18.8rem;" autoplay="true" loop="false" muted="true" mode="widthFix" :src="goodsData.picVideo"></video> -->
					</view>
				</swiper-item>
			</swiper>
		</view>

data添加参数showFullVideo:true
onShow()添加获取视频环境方法

onShow() {
			this.player = uni.createVideoContext("firstVideo")
		},

methods添加方法swiperChange

swiperChange(current, source){
			    // 切换如果不是视频位置 暂停视频
				console.log(current.target.current)
			    if(current.target.current == 0){
					//this.player.seek(0)
					this.player.play()
					//this.showFullVideo=true;
			    }else{
					this.player.pause()
					//this.player.stop()
					//this.showFullVideo=false;
			        
			    }
			},

完成!
遇到的问题:
做的中间一度swiper-item挡住了video控制条点不了不知道为什么,第二天再试的时候又好了,按理说video应该属于最高层级,非常奇怪有待研究。
另外如果使用this.player.play()this.player.pause(),微信小程序页面的时候最好使用this.player = uni.createVideoContext('firstVideo',this)方式。
还有,video的滑动效果会导致swiper的滑动效果不顺畅出现卡顿,查询资料发现是手动滑动轮播时触发到了video标签的事件,需要在video上加上:enable-progress-gesture="false",禁止video的滑动效果。

### 创建 UniApp 图片轮播Swiper 示例 #### 准备工作 为了创建一个图片轮播图,在项目中引入 `uni-swiper` 组件是非常重要的。确保已经安装并配置好 UniApp 开发环境。 #### HTML 结构设置 在面模板文件 `.vue` 中定义 Swiper 的结构,如下所示: ```html <template> <view class="swiper-container"> <!-- 使用 uni-swiper 容器 --> <swiper :indicator-dots="true" :autoplay="true" interval="3000" duration="500"> <!-- 循环渲染每一张幻灯片 --> <swiper-item v-for="(item, index) in images" :key="index"> <image :src="item.src"></image> </swiper-item> </swiper> </view> </template> ``` 此部分代码设置了自动播放间隔时间以及切换动画持续时间为 500ms,并启用了指示点[^2]。 #### JavaScript 配置 接着,在 `<script>` 标签内初始化数据源其他必要的逻辑处理: ```javascript <script> export default { data() { return { // 轮播图的数据列表 images: [ { src: 'https://example.com/image1.jpg' }, { src: 'https://example.com/image2.jpg' }, { src: 'https://example.com/image3.jpg' } ] }; } }; </script> ``` 这里定义了一个名为 `images` 的数组来存储各个图片链接地址。 #### CSS 样式调整 最后一步是对样式进行优化以适应不同尺寸屏幕的需求: ```css <style scoped> .swiper-container { width: 100%; height: auto; } /* 设置 image 占满整个 swiper-item */ swiper-item image { width: 100%; display: block; } </style> ``` 上述样式使得轮播图能够根据容器大小自适应调整其宽高比例[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值