编写了一个视频播放界面，然后再从后端再随机读取10条视频信息，最后在我们前端app的页面上显示出来。
<template><view class="index"><transition name="fade"><view class="video-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"><viewv-if="videoList[currentIndex].videoUrl":src="videoList[currentIndex].videoUrl" :key="currentIndex" class="video-element" style="height:200px;width: 350px;" ref="videoElement"autoplay></view></view></transition></view>
</template><script>
import indexHeader from '@/components/index-header.vue';export default {components: {indexHeader},data() {return {title: 'Hello',videoList: [],currentIndex: 0,startY: 0,}},onShow() {uni.request({url:this.$BASE_URL.BASE_URL+'/getvideo',method:'GET',success: (res) => {this.videoList=res.data.data;console.log(this.videoList)}})},methods: {touchStart(e) {this.startY = e.changedTouches[0].clientY;},touchMove(e) {if (this.startY === 0) {return;}const deltaY = e.changedTouches[0].clientY - this.startY;if (deltaY > 50) {this.prevVideo();} else if (deltaY < -50) {this.nextVideo();}},touchEnd() {this.startY = 0;},headerSwitch(val) {this.currentIndex = 0; // 切换到第一个视频},prevVideo() {this.currentIndex = Math.max(0, this.currentIndex - 1); // 切换到上一个视频},nextVideo() {this.currentIndex = Math.min(this.videoList.length - 1, this.currentIndex + 1); // 切换到下一个视频}},created() {this.headerSwitch();},
}
</script><style lang="less">.index {display: flex;flex-direction: column;justify-content: center;background-color: #333333;height: 100vh;}.video-container {display: flex;justify-content: center;margin-top: 20px;overflow: hidden;}.video-element {width: 100%;max-width: 500px;}.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;}.fade-enter, .fade-leave-to {opacity: 0;}.video-container {position: relative;width: 100%;max-width: 350px;margin: 0 auto;overflow: hidden;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.video-container {position: relative;width: 100%;max-width: 100%;max-height: 100vh; /* 限制视频的最大高度为视窗高度 */margin: 0 auto;overflow: hidden;
}/* 视频元素样式 */
.video-element {width: 100%;height: auto;display: block;
}/* 渐变效果 */
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>
