uniapp 微信小程序 点击轮播图 打开video 功能记录

轮播图用的是uview的u-swiper组件，使用的内嵌video的轮播图，

			<u-swiper :list="bannerData" previousMargin="25" nextMargin="50rpx" circular :autoplay="true" radius="5" bgColor="#ffffff" indicatorMode="dot" :loading='bannerLoading' imgMode="aspectFit" @click="bannerClick(bannerData)" @change="bannerChange" height="300rpx"></u-swiper>

在onload里面调用接口获取banner数据

async onLoad() {
			try {
				let bannerRes = await getBannerList() //这里需要传参数 登录还没完成，之后加上
				if (bannerRes.state === 1) {
					this.bannerData = bannerRes.content.map((item) => {
						let obj = {}
						if (item.introInfoType === 2) { //2:视频 
                            //下面obj的属性是根据u-swper要求的banner数据属性配置
							obj.url = item.introUrl//轮播图片url
							obj.poster = item.coverImage//指定video轮播页的封面
							obj.type = 'video'//u-swiper标识视频用
						} else { //1：h5文章
							obj.url = item.coverImage
							obj.type = 'image'
							obj.clickUrl = item.introUrl//这个是自己额外加的属性，和业务有关，后续点击该轮播，跳转至webview页面加载该url的页面
						}
						return obj
					})
					this.bannerLoading = false //轮播loading关闭
				}
			} catch (e) {
				uni.showToast({
					title: "首页数据请求失败",
					icon: 'none',
					duration: 2000
				})
			}
		},

<!-- banner点击视频隐藏的组件 -->
		<video v-show="isOpenVideo" id="myVideo" :src="videoSrc" @fullscreenchange="fullscreenchange"></video>

                //在data里面定义的变量
                bannerIndex: null, //当前banner的index
				isOpenVideo: false, //是否打开video
				videoContext: null, //vieo实例
				videoSrc: null, //视频src

因为u-swiper组件的点击事件默认参数只能打印出来当前点击的轮播图的index，无法拿到点击轮播后其他数据来完成点击跳转等业务逻辑，所以通过change事件来转存index，然后点击事件的时候传入整个轮播图数据 bannerData，然后通过change事件暂存的index去获取点击的轮播图的业务逻辑数据，实现后续业务逻辑。

// 点击轮播图
			bannerClick(bannerData) {
				console.log(bannerData, "click");
				if (bannerData[this.bannerIndex].type === "video") {
					//打开视频（全屏播放）
					this.videoSrc = bannerData[this.bannerIndex].url
					this.isOpenVideo = true
					this.videoContext = uni.createVideoContext('myVideo')
					this.videoContext.play()
					this.videoContext.requestFullScreen()
				} else { //点击的是图片的跳转webview页面展示文章
					uni.navigateTo({
						url: `/pages-home/webview/index?url=${encodeURIComponent(bannerData[this.bannerIndex].clickUrl)}`
					})
				}
			},
			//退出全屏时停止播放
			fullscreenchange(e) {
				console.log(e)
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
					this.isOpenVideo = false
				}
			},
			// 轮播图改变时触发，保存轮播的index
			bannerChange(e) {
				this.bannerIndex = e.current
			},