比swiper中嵌套video顺滑一点

<template>
	<div>
		<div class="all" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">
			<list :pagingEnabled="true" @loadmore="loadmore" @scroll="scroll">
				<cell v-for="(item, index) in dataList" :key="index" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">
					<video
						@click="selectVideo(index)"
						:id="`id_${index}`"
						:src="item.video_path"
						:style="{ width: screenWidth + 'px', height: screenHeight + 'px' }"
						:show-play-btn="false"
						:controls="false"
						:poster="item.image_path"
						class="video"
						ref="videoRef"
						:enable-progress-gesture="false"
					></video>
				</cell>
			</list>
		</div>
	</div>
</template>

<script>
var videoContext = null;
export default {
	data() {
		return {
			dataList: [
				{
					video_path: 'xxxxxxxxxxxx',
					image_path: 'xxxxxxxxxxxx?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,m_fast'
				},
				{
					video_path: 'xxxxxxxxxxxx',
					image_path: 'xxxxxxxxxxxx?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,m_fast'
				},
				{
					video_path: 'xxxxxxxxxxxx',
					image_path: 'xxxxxxxxxxxx?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,m_fast'
				}
			],
			screenWidth: uni.getSystemInfoSync().screenWidth,
			screenHeight: uni.getSystemInfoSync().screenHeight,
			index: 0,
			play: false
		};
	},
	methods: {
		loadmore(e) {
			uni.showToast({
				title: '已经到滑到底了~',
				icon: 'none',
				duration: 2000,
				position: 'bottom'
			});
		},
		scroll(e) {
			let _this = this;
			if (_this.play) {
				videoContext.stop();
				_this.play = false;
			}
			this.index = Math.abs(e.contentOffset.y / this.screenHeight).toFixed(0);
			_this.selectVideo(_this.index);
		},
		selectVideo(index) {
			let _this = this;
			videoContext = _this.$refs.videoRef[index];
			if (!_this.play) {
				videoContext.play();
				_this.play = true;
			} else {
				videoContext.pause();
				_this.play = false;
			}
		}
	}
};
</script>

<style>
.all {
}
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐