uni-app 视频滑动+适配ios底部安全区域

<template>
	<view class="app-video-list">
		<view class="video-list-video">
			<swiper class="swiper" circular :vertical="vertical" @animationfinish="animationfinish">
				<swiper-item v-for="(item,i) in videoList" :key="i">
					<video :src="item.url" :id="'myVideo'+i" style="width: 100%;height:845upx ;" :autoplay="autoplay"
						:loop="loop" :enable-play-gesture="true"></video>
					<cover-view class="bottom-txt">
						<view class="bot-title">
							{{item.title}}
						</view>
					</cover-view>
					<cover-view class="right-box">
						<uni-icons type="heart" color="#fff" size="40"></uni-icons>
						<uni-icons type="redo" color="#fff" size="40"></uni-icons>
					</cover-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				video: null,
				autoplay: false,
				loop: false,
				current: 0,
				nextCurrent: 0,
				vertical: true,
				videoList: []
			}
		},
		onLoad() {
			let videoContext = uni.createVideoContext('myVideo0')
			videoContext.play()
		},
		methods: {
			changeCat(e) {
				this.cateIndex = e
			},
			animationfinish(e) {
				let that = this
				console.log('change');
				this.nextCurrent = e.detail.current
				let lastId = 'myVideo' + that.current
				let id = 'myVideo' + that.nextCurrent
				console.log(lastId + '===id change===' + id);
				let videoContext = uni.createVideoContext(lastId)
				videoContext.pause()
				videoContext = uni.createVideoContext(id)
				videoContext.play()
				this.current = this.nextCurrent
				console.log('finish');
			}
		}
	}
</script>

<style lang="scss">
	.app-video-list {
		width: 100%;
		height: 100vh;
		background-color: #000;
		color: #fff;
		font-size: 28upx;


		.swiper {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;

			.bottom-txt {
				width: 90%;
				height: auto;
				position: fixed;
				bottom: 120upx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.bot-title {
					width: 96%;
					height: auto;
				}

				.tips {
					width: 100%;
					min-height: 60upx;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex-direction: row;
					flex-wrap: wrap;

					.bot-tips {
						padding: 10upx 20upx;
						background-color: #c4c4c4;
						font-size: 24upx;
						margin-top: 20upx;
						border-radius: 60upx;
						color: #fff;
						margin-left: 20upx;
						margin-top: 20upx;
					}
				}

			}

			.right-box {
				width: 10%;
				position: fixed;
				right: 0;
				bottom: 220upx;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
			}
		}
	}
</style>

仅限于安卓，不适用于手机任何浏览器和iOS。

适配IOS底部安全区域的CSS

padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS 设备 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */