小程序轮播+嵌入视频+详情跳转

最新推荐文章于 2024-08-07 08:02:00 发布

白菜zzz

最新推荐文章于 2024-08-07 08:02:00 发布

阅读量110

点赞数

文章标签：小程序音视频 java

本文链接：https://blog.csdn.net/weixin_67902718/article/details/130746450

版权

这是一个使用Vue.js编写的HTML代码段，用于创建一个带有自动切换、循环播放和视频播放功能的轮播图组件。组件中包含图片和视频两种类型的轮播项，视频播放时会隐藏其他内容并提供播放、暂停和结束的事件处理函数。

摘要由CSDN通过智能技术生成

html

<view class="swiper-box">
			<swiper @change="cardSwiper" class="swiper-a" circular="true" :autoplay="autoplay" interval="4000"
				duration="600">
				<swiper-item class="swiper-list" v-for="(item, index) in swiperList" :key="index">
					<!-- 轮播视频去详情遮罩层 -->
					<view v-show="item.type*1==1&&isShow == false" @click="gotodetail(item.type)" class="swiper-mark">
					</view>
					<view class="swiper-item">
						<image class="swiper-img" @click="gotodetail(item.type)" v-if="item.type*1==0" :src="item.url"
							mode="widthFix">
						</image>
						<video class="swiper-img" :id="'myVideo'+index" controls="true" @play="playVideo()"
							@pause="pause" v-else @ended="ended" page-gesture="true" object-fit="contain"
							show-mute-btn="true" enable-play-gesture="true" :src="item.url"></video>
					</view>
				</swiper-item>
			</swiper>

			<!-- 轮播小点 -->
			<view class="dot-box m-flex">
				<view v-for="(item,index) in swiperList" :key="index"
					:class="[current==index?'swiper-bar active-bar':'swiper-bar']"></view>
			</view>
		</view>

js

export default {
		data() {
			return {
				current: 0, // 轮播当前所在滑块的 index
				swiperList: [], // 轮播图地址
				videoContext: '',
				autoplay: true, //自动切换轮播图
				isShow: true,
				swiperId: [], // 轮播图跳转id
			}
		},
		onLoad() {
			this.getBanner();
		},
		methods: {
			// 去轮播详情页
			gotodetail(type) {
				// 视频
				if (type * 1 == 1 && this.isShow == false) {
					this.navto('../treasury/detail?id=' + this.swiperId[this.current])
				} else if (type * 1 == 0) {
				// 图片
					this.navto('../treasury/detail?id=' + this.swiperId[this.current])
				} else {
					return
				}
			},
			// 播放视频
			playVideo() {
				// console.log('play');
				this.isShow = false
				this.autoplay = false
			},
			// 视频暂停
			pause() {
				// console.log('pause');
				this.autoplay = true
				this.isShow = true
			},
			// 视频结束
			ended() {
				// console.log('ended');
				this.autoplay = true
				this.isShow = true
			},
			// 切换轮播
			cardSwiper(e) {
				this.current = e.detail.current
				let source = e.detail.source
				if (source == 'touch') {
					this.videoContext = uni.createVideoContext('myVideo' + (this.current + this.swiperList.length - 1),
						this)
					this.videoContext.pause();
				}
				this.isShow = true
				this.autoplay = true
			},
			// 获取轮播图
			getBanner() {
				this.$rqt.getswiper({
					shufflingLocation: 0
				}).then(res => {
					const {
						data
					} = res || {}
					this.swiperList = data.map(item => {
						return {
							url: this.baseUrl + item.shufflingUrl,
							type: item.urlType,
						}
					}) // 轮播图地址
					this.swiperId = data.map(item => item.id) // 轮播图id
				})
			},
		}
	}
</script>

css

// 轮播
		.swiper-box {
			width: 690rpx;
			height: 280rpx;
			border-radius: 20rpx;
			margin: 20rpx auto 48rpx;
			background-color: #dfdfdf;
			position: relative;

			.swiper-a {
				width: 690rpx;
				height: 280rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.swiper-list {
					width: 690rpx;
					height: 280rpx;
					position: relative;

					.swiper-mark {
						width: 690rpx;
						height: 210rpx;
						background-color: rgba(255, 255, 255, 0);
						position: absolute;
						top: 0;
						left: 0;
						z-index: 100;
					}

					.swiper-item {
						width: 690rpx;
						height: 280rpx;

						.swiper-img {
							width: 690rpx;
							height: 280rpx;
						}
					}
				}
			}

			// 小点
			.dot-box {
				height: 6rpx;
				justify-content: center;
				position: absolute;
				bottom: 12rpx;
				left: 0;
				right: 0;

				.swiper-bar {
					width: 24rpx;
					height: 4rpx;
					margin: 0 2rpx;
					background: #FFFFFF;
					opacity: 0.5;
				}

				.active-bar {
					background: #fff;
					opacity: 1;
				}
			}
		}