uniapp实现app-nvue的快手抖音的视频上下滑动功能

原创已于 2024-06-12 10:16:42 修改 · 1.2k 阅读
5 ·
CC 4.0 BY-SA版权
文章标签：
#uni-app #音视频 #javascript
于 2023-11-22 22:27:59 首次发布
本文介绍如何在uniapp的nvue页面中，利用javascript技术实现类似快手抖音的视频上下滑动交互效果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
uniapp-nvue页面文件：localVideo.nvue

<script>
    export default {
        data() {
            return {
                // 视频数据
                videoArr: [],
                // 显示的视频数据
                videoArrScroll: [],
                // 视频显示的开始下标
                startIndex: 0,
                // 视频开始的结束下标
                endIndex: 3,
                // 暂停播放
                playBob: true,
            }
        },
        onLoad() {
            let videoArr = uni.getStorageSync("videoArr")
            if (videoArr) {
                this.videoArr = JSON.parse(videoArr)
                this.videoArrScroll = this.videoArr.slice(0, 3)
                console.log("视频数据：", this.videoArr);
            }
        },
        onReady() {
            let videoArr = uni.getStorageSync("videoArr")
            if (videoArr) {
                const that = this
                const videoContent = uni.createVideoContext(that.videoArrScroll[0].id)
                videoContent.play()
            }
        },
        methods: {
            // 上传视频
            uploadVideos() {
                const that = this
                uni.chooseVideo({
                    sourceType: ['album'],
                    success: function(res) {
                        let obj = {
                            // 视频地址
                            src: res.tempFilePath,
                            // 视频描述
                            dsc: ''
                        }
                        obj.id = (new Date().getTime()) + ''
                        that.videoArr.unshift(obj)
                        that.startIndex = 0
                        that.endIndex = 3
                        that.videoArrScroll = that.videoArr.slice(0, 3)
                        setTimeout(() => {
                            let videoContents = null
                            that.videoArrScroll.forEach((item, index) => {
                                videoContents = uni.createVideoContext(item.id)
                                videoContents.pause()
                            })
                            videoContents = uni.createVideoContext(that.videoArrScroll[0].id)
                            videoContents.play()
                        }, 100)
                        uni.setStorageSync("videoArr", JSON.stringify(that.videoArr))
                    }
                });
            },
            // 滑动视频时触发
            videoChange(e) {
                const that = this
                const index = e.detail.current
                console.log("当前视频下标：", index);
                let videoContents = null
                that.videoArrScroll.forEach((item, index) => {
                    videoContents = uni.createVideoContext(item.id)
                    videoContents.pause()
                })
                console.log("当前视频ID:", that.videoArrScroll[index].id);
                videoContents = uni.createVideoContext(that.videoArrScroll[index].id)
                videoContents.play()

                that.endIndex += 1
                that.videoArrScroll = that.videoArr.slice(that.startIndex, that.endIndex)
            },
            // 实现数组乱序
            shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            },
            // 刷新
            refresh() {
                console.log("触发");
                const that = this
                const arr = JSON.parse(JSON.stringify(that.videoArr))
                that.videoArr = this.shuffleArray(arr);
                console.log("乱序的数组：", that.videoArr);
                that.startIndex = 0
                that.endIndex = 3
                that.videoArrScroll = that.videoArr.slice(0, 3)
                setTimeout(() => {
                    let videoContents = null
                    that.videoArrScroll.forEach((item, index) => {
                        videoContents = uni.createVideoContext(item.id)
                        videoContents.pause()
                    })
                    videoContents = uni.createVideoContext(that.videoArrScroll[0].id)
                    videoContents.play()
                }, 100)
                uni.setStorageSync("videoArr", JSON.stringify(that.videoArr))
            },
            // 单击视频播放暂停
            playVideo(videoId) {
                const that = this
                let videoContents = null
                that.videoArrScroll.forEach((item, index) => {
                    videoContents = uni.createVideoContext(item.id)
                    videoContents.pause()
                })

                let videoContent = null
                if (this.playBob) {
                    videoContent = uni.createVideoContext(videoId)
                    videoContent.pause()
                    this.playBob = false
                } else {
                    videoContent = uni.createVideoContext(videoId)
                    videoContent.play()
                    this.playBob = true
                }

            }
        }
    }
</script>

<template>
    <view class="box">
        <!-- 数据为空 -->
        <view class="dataNull" v-if="videoArrScroll.length==0">
            <u-empty mode="data" icon="../../static/dataNull.png">
            </u-empty>
        </view>

        <!--视频区域 
        vertical:设置轮播方向为竖向
        acceleration：实现快手视频滑动效果：当开启时，会根据滑动速度，连续滑动多屏
        -->
        <swiper v-if="videoArrScroll.length!=0" class="video_box" @change="videoChange" :vertical="true"
            :acceleration="true">
            <swiper-item v-for="item in videoArrScroll" :key="item.id" class="video_item">
                <video @click="playVideo(item.id)" style="width: 750rpx;height: 1334rpx;" :id="item.id" :src="item.src"
                    :loop='true' :controls="true"></video>
            </swiper-item>
        </swiper>


        <!-- 底部功能 -->
        <view class="bottom">
            <view class="bottom_item" @click="refresh">
                <image style="width: 70rpx;height: 70rpx;" src="../../static/shuaXing.png" mode=""></image>
                <text style="font-size: 30rpx;margin-top: 10rpx;">刷新一下</text>
            </view>
            <view class="bottom_item" @click="uploadVideos">
                <image style="width: 70rpx;height: 70rpx;" src="../../static/shangChuan.png" mode=""></image>
                <text style="font-size: 30rpx;margin-top: 10rpx;">上传本地视频</text>
            </view>
        </view>
    </view>
</template>


<style scoped>
    .dataNull {
        width: 750rpx;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 400rpx;
    }

    .video_item {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video_box {
        background-color: black;
        width: 750rpx;
        /* #ifdef APP-VUE */
        height: calc(100vh - 140rpx);
        /* #endif  */

        /* #ifdef APP-NVUE */
        flex: 1;
        margin-bottom: 140rpx;
        /* #endif  */
    }

    .box {
        /* #ifdef APP-VUE */
        height: 100vh;
        /* #endif  */
        /* #ifdef APP-NVUE */
        flex: 1;
        /* #endif  */
        background-color: #f2f2f2;
    }

    .bottom_item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bottom {
        position: fixed;
        bottom: 0;
        z-index: 99999;
        width: 750rpx;
        height: 140rpx;
        background-color: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
</style>