更新记录

1.0.4（2024-12-23）

优化组件文档

1.0.3（2024-12-23）

修复暂停事件带来的问题

1.0.2（2024-12-23）

新增展开更多文案颜色配置

平台兼容性

list-video-scroll

用于app项目中的仿抖音视频滑动播放插件 该插件已实际使用在项目中 抛出了所有点击事件,只需要处理你自己的逻辑即可

如果你想正确使用该插件

1.该插件使用uniapp video 加上nvue组件 list封装 所以只支持app端， 2.纯vue3代码编写所以支持vue3项目 3.后续看该插件反馈考虑提供小程序版本 4.插件的宽高默认是屏幕宽高。高度是自动减去了底部tabbar的高度，下面是原生tabbar的高度计算 完美兼容了安卓和IOS 5.返回了当前项的实例 videoRefs 该实例几乎可以访问所有可修改属性和方法

该代码无需 写入项目 已在插件中默认写了

1.如果你想改变插件的宽高请传入props styles

    /**
     *  
     */
    onMounted(()=>{
        const { screenWidth,safeAreaInsets,screenHeight} = uni.getSystemInfoSync();
        const safeAreaInsetsBottom = safeAreaInsets.bottom;
        videoStyle.value.width = screenWidth;
        // 底部 tabbar的 高度 safeAreaInsetsBottom + 56
        videoStyle.value.height =  (screenHeight - safeAreaInsetsBottom - 56)
    });

界面配置

  <template>
    <view class="video-wraps">
         <list-video-scroll 
                ref="parantRefs"
                @loadMorePrev="loadMorePrev" 
                :enditProps="enditProps" 
                :progressProps="progressProps"
                :dotprops="dotprops"
                @loadMore="loadMore"
                v-model:videoList="videoList"
                @handleUsers="handleUsers"
                @handleFollow="handleFollow"
                @expandedChange="expandedChange"
                @handEndit="handEndit"
           />
    </view>
</template>

使用该hooks 完美开启插件使用 包含了所有完整数据和配置项目

    import { ref } from 'vue'
/**
 *   视频滚动播放插件hooks
 *   nvue 直接俄获取屏幕的宽高
 */
export const usePlugin = () =>{
    const testUrl = 'https://image2.soole.com.cn'
    /**
     *  这是操作图标配置
     */
    const enditProps = {
        followIcon:testUrl + '/slb-picture2024112715301268891.jpg',//关注成功的闪图标
        unfollowIcon:testUrl + '/slb-picture2024112715300723069.jpg',//未关注图标
        list:[
            {
                activeIcon:testUrl + '/slb-picture2024120419110855644.jpg',
                deactiveIcon:testUrl + '/slb-picture2024120419110160602.jpg',
                name:'点赞红心',
                key:'giveLike',//Boolen 用于处理当前图标是否选中 如果图标纯灰色 不需要展示选中状态 不需要该字段
                valueKey:'likeNum'
            },
            {
                activeIcon:testUrl + '/slb-picture2024122308584096081.jpg',
                deactiveIcon:testUrl + '/slb-picture2024122309250828688.jpg',
                name:'收藏',
                key:'collect',//Boolen 用于处理当前图标是否选中 如果图标纯灰色 不需要展示选中状态 不需要该字段
                valueKey:'collectNum',
                imgStyle:{
                    width: '74rpx',
                    height: '66rpx'
                }
            },
            {
                activeIcon:testUrl + '/slb-picture2024122309251160418.jpg',
                deactiveIcon:testUrl + '/slb-picture2024122309295328292.jpg',
                name:'少推荐',
                key:'recommend',//Boolen 用于处理当前图标是否选中 如果图标纯灰色 不需要展示选中状态 不需要该字段
                valueKey:'recommendNum',
                imgStyle:{
                    width: '74rpx',
                    height: '66rpx'
                },
                /**
                 *  如果说 展示的值是文案 请格式化为文案
                 * @returns  
                 */
                fommat:(val)=>{
                    return '少推荐'
                }
            },
            {
                deactiveIcon:testUrl + '/slb-picture2024112710420183978.jpg',
                name:'评论图标',
                valueKey:'commentNum'
            },
            {
                deactiveIcon:testUrl + '/slb-picture2024112710420768829.jpg',
                name:'分享',
                // style
                // textStyle
                // imgStyle
                valueKey:'shareNum'
            },
        ]
    }
    /**
     *  进度条的配置
     */
    const progressProps = {
         background:'#FFA028',
         opacity:0.3
    }
    /**
     *  进度条圆的设置
     */
    const dotprops = {
        background:'#fff',
    }
    const videoList = ref([
        {
            id:1,
            expanded:false,
            userIcon:'https://image2.soole.com.cn/slb-picture2024112710420768829.jpg',//用户头像
            giveLike:false,//是否点赞
            follow:false,//是否关注 
            collect:false,//是否收藏
            recommend:false,//是否推荐
            likeNum:1,//喜欢数量
            commentNum:1,//评论数量
            fllowOpacity:1,//需要点赞评论缓慢消失特效
            shareNum:1,//分享数量
            collectNum:1,//收藏数量
            recommendNum:1,//少推荐数量 或者是文案
            title:'这是视频标题',
            userName:'@MOMO',//这是发布视频用户名称
            src:"https://slbimage.soole.com.cn/ljnudmxugFtzB7aTSgk3m8nMr6O0",
            introduce:'这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容'
        },
        {
            id:2,
            userIcon:'https://image2.soole.com.cn/slb-picture2024112710420768829.jpg',//用户头像
            giveLike:false,//是否点赞
            follow:false,//是否关注 
            collect:false,//是否收藏
            recommend:false,//是否推荐
            likeNum:1,//喜欢数量
            commentNum:1,//评论数量
            shareNum:1,//分享数量
            collectNum:1,//收藏数量
            recommendNum:1,//少推荐数量 或者是文案
            title:'这是视频标题',
            userName:'@MOMO',//这是发布视频用户名称
            src:"https://slbimage.soole.com.cn/luQdtZzmfJsXzAjpu7k9SubjhFvy",
            introduce:'这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容'
        },
        {
            id:3,
            userIcon:'https://image2.soole.com.cn/slb-picture2024112710420768829.jpg',//用户头像
            giveLike:false,//是否点赞
            follow:false,//是否关注 
            collect:false,//是否收藏
            recommend:false,//是否推荐
            likeNum:1,//喜欢数量
            commentNum:1,//评论数量
            shareNum:1,//分享数量 
            collectNum:1,//收藏数量
            recommendNum:1,//少推荐数量 或者是文案
            title:'这是视频标题',
            userName:'@MOMO',//这是发布视频用户名称
            src:"https://slbimage.soole.com.cn/luQdtZzmfJsXzAjpu7k9SubjhFvy",
            introduce:'这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容这是展开更多的内容'
        }
    ]);

    /**
     *  你可能需要在滚动事件执行前执行一些操作
     */
    const loadMorePrev = ({indexs,prevIndex,videoRefs})=>{
        console.log(indexs,prevIndex,'滚动之前执行了')
        videoRefs.pauseVideo();
    };

    /**
     *  滚动加载了
     */
    const loadMore = ({indexs,prevIndex,direction,videoRefs})=>{
    console.log(indexs,prevIndex,direction,'滚动了')
      videoRefs.playVideo();
    }

    const handleUsers = (props)=>{
       console.log('handleUsers用户点击了',props)
    }
    let num = 0;
    /**
     *  统一处理 操作栏事件
     */
    const handEndit = (props)=>{
        const { videoRefs,enditIndex} = props
        const {key,valueKey} = enditIndex
        if(key && key == 'collect'){
            videoRefs.updateCollectNum += 1;
            videoRefs.updateCollect = true
        }else if(key && key == 'giveLike'){
            videoRefs.updateGiveLike = true
            videoRefs.updateLikeNum ++;
        }else if(key && key == 'recommend'){
            /**
             *  少推荐 展示的值可能是中文文案 比较特殊 按照抖音 
             *  如果不需要展示文案而是数字 请保持和 喜欢的操作相同即可
             */
            videoRefs.updateRecommend = true
             num +=1
            videoRefs.updateRecommendNum = videoRefs.updateRecommendNum + ''+ num
        }else {
            if(valueKey == 'commentNum'){
                videoRefs.updateCommentNum ++;
            }else if(valueKey == 'shareNum'){
                videoRefs.updateShareNum ++;
            }
            console.log('handEndit',valueKey,key);
        }
    }

    /**
     *  关注用户操作
     * @param { } props 
     */
     const handleFollow = (props)=>{
        const { videoRefs } = props
        console.log('handleFollow了',props)
        videoRefs.updateFollow = true;
        videoRefs.slowOpacitys();//缓慢消失
     }

     /**
      *  展开更多
      * @param { } props 
      */
     const expandedChange = (props) =>{
        console.log('expandedChange',props)
     }
    return {
        videoList,
        enditProps,
        loadMorePrev,
        loadMore,
        handleUsers,
        handleFollow,
        expandedChange,
        dotprops,
        progressProps,
        handEndit
    }
}

    import { onMounted,ref} from 'vue'
    const { 
        videoList,
        enditProps,
        loadMorePrev,
        loadMore,
        handleUsers,
        handleFollow,
        expandedChange,
        progressProps,
        dotprops,
        handEndit
    } = usePlugin();
    onMounted(()=>{
        // 播放第一个视频
        parantRefs.value.firstItemRefs()?.autoplay();
    })

list-video-scroll Props（md文档）

注:请它的属性请具体查看 提供的示例。