uniapp Wechat applet Click on the carousel image to open the video function record

The carousel map uses the u-swiper component of uview, and the carousel map with embedded video is used.

			<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>

Call the interface in onload to get banner data

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

Because the default parameters of the click event of the u-swiper component can only print out the index of the currently clicked carousel, and cannot obtain other data after clicking the carousel to complete the business logic such as click jump, so the index is dumped through the change event. Then when the event is clicked, the entire carousel data bannerData is passed in, and then the business logic data of the clicked carousel is obtained through the temporary index of the change event to realize the subsequent business logic.

// 点击轮播图
			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
			},