uniapp 隨機抽取影片播放

編寫了一個影片播放介面，然後再從後端再隨機讀取10條影片資訊，最後在我們前端app的頁面上顯示出來。

<template>
    <view class="index">
        <transition name="fade">
            <view class="video-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
                <view
                    v-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>