更新记录

1.0.1（2024-11-21）

文档补充

1.0.0（2024-11-21）

初始化

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 4.29 app-nvue	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

仿抖音快手刷视频插件组件文档

注意：只能用于nvue页面

注意：由于uniapp项目nvue不能加密运行，所以普通授权版运行不了，想看预览效果的只能扫下面二维码体验，觉得适合再下单哈

注意：ios端只能联系作者打包体验(需提供测试机型打包证书)

注意：源码运行前需要在项目manifest.json文件勾选video模块，否则运行后显示黑屏

使用说明

将插件下载到项目uni_modules目录下
新建一个nvue页面引入组件
参考下面页面使用示例代码即可

扫码体验Android安装包效果

Android体验二维码

已测试机型

系统	机型	系统版本	测试情况
Android	红米K60	android14	运行丝滑
ios	IphoneXR	ios15	运行丝滑

页面使用示例

<template>
    <xwqAppPlVideo v-if="isShow" :videoList="videoList" :deleHeight="0" :isAutoplay="false"
        v-model:closeRefresh="closeRefresh" @loadNext="loadNext" @toolsFn="toolsFn" @onRefresh="onRefresh">
        //可以自定义右侧图标样式，slotProps.item即是组件抛出的对应视频数据
        // <!-- <template #default="slotProps">
        //  <view class="v-user-avart-wrap">
        //      slotProps.item即是数组的item数据
        //      <image class="v-user-avart" :src="`${slotProps.item.avatar}`" />
        //  </view>
        // </template> -->
    </xwqAppPlVideo>
</template>

<script setup lang="ts">
    import { ref, ComponentInternalInstance, getCurrentInstance, watch } from 'vue';
    import {
        onLoad,
        onShow,
        onHide,
        onReady
    } from "@dcloudio/uni-app";
    import xwqAppPlVideo from '@/uni_modules/xwq-app-pl-video/components/xwq-app-pl-video/xwq-app-pl-video.vue';

    const isShow = ref(false);
    let params = {
        pagesize: 10,
        page: 1
    };
    let finished = false;
    const closeRefresh = ref(false);
    const videoList = ref([]);

    onLoad(() => {
        isShow.value = true;
        get();
    })

    //请求数据
    const get = () => {
        console.log('请求参数====', params);
        const requestDb = uniCloud.importObject('videoList', { customUI: false });
        requestDb.getVideo(params).then(res => {
            console.log(res, '----------')
            if (res.code == 0) {

                if (res.detail.length < params.pagesize) {
                    finished = true;
                }
                if (res.detail.length == 0) return;
                if (videoList.value.length === 0) {
                    videoList.value = res.detail;

                } else {
                    videoList.value = [...videoList.value, ...res.detail];
                }
                console.log('视频请求结果====', videoList.value)
            }
        }).catch(err => {
            console.error(err)
            uni.showToast({
                title: '接口异常，请稍后再试!',
                icon: 'none'
            })
        })

    };
    //请求下一页
    const loadNext = () => {
        if (finished) return;
        ++params.page;

        get();
    };

    //右侧工具栏
    const toolsFn = (item) => {
        console.log('点击的参数=====', item);
    };

    //下拉刷新回调
    const onRefresh = () => {
        console.log('正在下拉刷新===');
        setTimeout(() => {
            closeRefresh.value = true;
        }, 1500)
    }
</script>

<style>
    .v-user-avart {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
    }

    .v-user-avart-wrap {
        width: 110rpx;
        height: 110rpx;
        border: 2px solid #fff;
        border-radius: 110rpx;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        margin-bottom: 20px;
        position: relative;
        /* overflow: visible; */
    }

    .v-user-follow {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 30%;
        top: 50px;
        transform: translateX(-50%);
    }

    /* 以下为光盘的样式 */
    .video-disk {
        /* // position: relative; */
        /* // background-color: #ff0000; */
    }

    .music-cover {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.2);
        z-index: 2;
        /* box-sizing: border-box; */
        transform: rotate(0deg);
        transition-property: transform;
        transition-duration: 5000s;
        transition-timing-function: linear;
    }

    .music-disk {
        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;
    }

    .music-disk-user-avart {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
    }

    .music-logo {
        width: 20px;
        height: 20px;
        position: absolute;
        opacity: 0.8;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .control-item {
        /* border: none; */
        border-color: transparent;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .control-text {
        font-size: 32rpx;
        color: #fff;
        font-weight: 700;
    }

    .icon-style {
        width: 80rpx;
        height: 80rpx;
    }
</style>

接口数据格式


[
    {
        "userId": "666dd802f366f40a8b9a4dd4",//用户ID
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",//头像
        "nickname": "追风少女心💓( ˘ ³˘)💋",//昵称
        "isfollow": false,
        "videoId": "672b6be8e4ca03e4581a0063",//视频ID
        "playurl": "xxxxxxxxxx/mu38_video/1730898885724/compress_video_1125321996.m3u8",//视频链接
        "poster": "xxxxxxxxxx/mu38_video/1730898885724/compress_video_1125321996.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:FZRg1qngVIo8BPLTvFObPNUtgAA=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",//视频用户
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",//视频标题
        "loop": true,//循环播放
        "duration": 29970,//视频时长
        "playIng": false,//播放状态
        "muted": false,//是否静音
        "likeSum": 0,//视频被点赞数量
        "isLiked": false,//当前视频是否已点赞
        "commemtSum": 0,//评论的数量
        "shareSum": 0,//被分享的数量
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672c903442a21686318cd4ad",
        "playurl": "xxxxxxxxxx/mu38_video/1730973720501/compress_video_1200159408.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730973720501/compress_video_1200159408.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:inBQHVoZ_y-v_QO2-npeVpSvzvY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 9100,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672c911ebaea7915f45e1b09",
        "playurl": "xxxxxxxxxx/mu38_video/1730973966319/compress_video_1200405117.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730973966319/compress_video_1200405117.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:RJvmNrC5LKkD_eWUT1o3Tid1WWI=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 14280,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca13b29d183956332a5b2",
        "playurl": "xxxxxxxxxx/mu38_video/1730978068419/compress_video_1204507162.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978068419/compress_video_1204507162.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:9ZeeMpwqwo7SLJhoBeV9fCsnwSY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 10940,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca15529d183956332a64b",
        "playurl": "xxxxxxxxxx/mu38_video/1730978123397/compress_video_1204562476.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978123397/compress_video_1204562476.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:iVxxdgS871qGS2JgoFXN03nNjfQ=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 9450,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca16b521a64050d97c506",
        "playurl": "xxxxxxxxxx/mu38_video/1730978147033/compress_video_1204586286.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978147033/compress_video_1204586286.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:TGPsE7W3EmCEdaETm3e8S3sQWxA=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 7410,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    },
    {
        "userId": "666dd802f366f40a8b9a4dd4",
        "avatar": "https://env-00jxgwsep3px.normal.cloudstatic.cn/snsPro/image/1728312053918.jpg",
        "nickname": "追风少女心💓( ˘ ³˘)💋",
        "isfollow": false,
        "videoId": "672ca1c529d183956332a975",
        "playurl": "xxxxxxxxxx/mu38_video/1730978178134/compress_video_1204605619.m3u8",
        "poster": "xxxxxxxxxx/mu38_video/1730978178134/compress_video_1204605619.m3u8?vframe/jpg/offset/1/&e=1732097696&token=IAM-C1JVXCM70fL6bT80pA5w1YLPCXa7xisCoyR3eVhr:wFO341M63ax-f-ZHxi2p88Z5fSY=",
        "vduser": "追风少女心💓( ˘ ³˘)💋",
        "vdtitle": "仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频仿抖音视频",
        "loop": true,
        "duration": 124200,
        "playIng": false,
        "muted": false,
        "likeSum": 0,
        "isLiked": false,
        "commemtSum": 0,
        "shareSum": 0
    }
]

（nvue）组件，app端仿抖音短视频丝滑切换视频效果，无限数据加载刷视频 仿抖音 视频刷刷

更新记录

1.0.1（2024-11-21）

1.0.0（2024-11-21）

平台兼容性

仿抖音快手刷视频插件组件文档

使用说明

扫码体验Android安装包效果

已测试机型

页面使用示例

接口数据格式

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

仿抖音短视频微信小程序丝滑切换视频效果，无限数据加载不卡顿

mlkit谷歌扫码插件，秒识别二维码，可自定义扫码格式、界面提示文案

xw-lottie-view 动画组件适配APP和H5端

系统权限验证、获取、跳转

FFmpeg视频、音频、图片编辑UTS插件

（nvue）组件，app端仿抖音短视频 丝滑切换视频效果，无限数据加载 刷视频 仿抖音 视频刷刷

更新记录

1.0.1（2024-11-21）

1.0.0（2024-11-21）

平台兼容性

仿抖音快手刷视频插件组件文档

使用说明

扫码体验Android安装包效果

已测试机型

页面使用示例

接口数据格式

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

仿抖音短视频微信小程序 丝滑切换视频效果，无限数据加载不卡顿

mlkit谷歌扫码插件，秒识别二维码，可自定义扫码格式、界面提示文案

xw-lottie-view 动画组件 适配APP和H5端

系统权限验证、获取、跳转

FFmpeg视频、音频、图片编辑UTS插件

Modal title

（nvue）组件，app端仿抖音短视频丝滑切换视频效果，无限数据加载刷视频仿抖音视频刷刷

仿抖音短视频微信小程序丝滑切换视频效果，无限数据加载不卡顿

xw-lottie-view 动画组件适配APP和H5端