更新记录

1.1.1（2022-01-17）

1.增加video-index参数，用于父组件获取当前播放视频的下标

1.1（2022-01-14）

增加微信小程序支持

1.0（2022-01-06）

初始版本1.0

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

沟通方式

QQ群：180756317

使用方式

<y-video-slide 
video-height="calc(100vh - 44px)" 
:data="videoData" 
:videoIndex.sync="currentIndex"
@refresh="refresh" 
@loadMore="loadMore" 
@share="share" 
@fabulous="fabulous" 
@follow="follow" 
@commentFabulous="commentFabulous">
</y-video-slide>

属性说明

video-height: 视频容器的高度

video-index:当前播放的视频下标

data:视频列表数据

@refresh：下拉刷新方法

@loadMore：上拉加载方法

@share：分享按钮方法

@fabulous：视频点赞切换方法

@follow：关注切换方法

@commentFabulous：评论点赞切换方法

data数据格式示例

            [{
                id: '1',
        //是否关注
                isFollow:0,
        //是否点赞
                isFabulous:1,
        //用户昵称
                userNick:'',
                //用户头像        
        userHead:'',
        //视频描述信息
                videoContent:'',
        //点赞数量
                fabulousCount: 1,
        //评论数量
                commentCount:1000,
        //分享数量
                shareCount:499,
        //视频资源地址
                videoUrl: '',
        //视频封面图片地址
                posterUrl: '',
        //视频评论对象
                commentObj:{
          //评论总数
                    count:520,
          //评论列表
                    list:[{
            //用户头像
                        userHead:'',
            //用户昵称
                        userNick:'小二',
            //评论内容
                        content:'',
            //评论时间
                        time:'2021-05-06 15:34:44',
            //点赞数量
                        fabulousCount:3737,
            //是否点赞
                        isFabulous:1,
            //评论列表
                        children:[{
              //被回复人
                            replyTo:'小二',
              //用户头像
                            userHead:'',
              //用户昵称
                            userNick:'小三',
              //回复内容
                            content:'',
              //回复时间
                            time:'2021-05-06 15:34:44',
              //点赞数量
                            fabulousCount:3737,
              //是否点赞
                            isFabulous:0,
                        }]
                    }]
                }
            }]

示例文件

<template>
    <view class="content">
        <y-video-slide 
        video-height="100vh" :data="videoData" 
                @refresh="refresh" @loadMore="loadMore" @share="share" 
                @fabulous="fabulous" @follow="follow" @commentFabulous="commentFabulous"></y-video-slide>
    </view>
</template>
<script>
export default {
    data() {
        return {
            videoData:[{
                id: '1',
                isFollow:0,
                isFabulous:1,
                userNick:'姚哥哥',
                videoContent:'这是一条测试这是一条测试这是一条测试这是一条测试这是一条测试这是一条测试这是一条测试这是一条测试这是一条测试',
                fabulousCount: 1,
                commentCount:1000,
                shareCount:499,
                videoUrl: 'https://v-cdn.zjol.com.cn/280443.mp4',
                posterUrl: 'https://img-my.csdn.net/uploads/201407/26/1406383299_1976.jpg',
                commentObj:{
                    count:520,
                    list:[{
                        userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642669624&t=028d851350e18512dbf4bfe3a86cbfa4',
                        userNick:'小二',
                        content:'这是一条测试而已',
                        time:'2021-05-06 15:34:44',
                        fabulousCount:3737,
                        isFabulous:1,
                        children:[{
                            replyTo:'小二',
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F3c%2F12%2F4c%2F3c124c5277386c897dad2977bb964ea1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670117&t=cd32b3baf24c5b3bba4c7516bb211bfe',
                            userNick:'小三',
                            content:'这是一条测试而已这是一条测试而已这是一条测试而已这是一条测试而已这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                            isFabulous:0,
                        },{
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F1f%2F4f%2F53%2F1f4f53402015d7c738e68e7fdfa4877c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670600&t=b0fbb15006c730305ec59bbfa55d18b9',
                            replyTo:'小三',
                            userNick:'小四',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                            isFabulous:0,
                        }]
                    }]
                },
                userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F39%2Fb7%2F53%2F39b75357f98675e2d6d5dcde1fb805a3.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642661023&t=dc2e75969d5509c28c65571534c2cf53'
            }, {
                id: '2',
                isFollow:1,
                isFabulous:0,
                userNick:'姚哥哥',
                videoContent:'这是一条测试',
                fabulousCount: 1,
                commentCount:1000,
                shareCount:499,
                videoUrl: 'https://v-cdn.zjol.com.cn/276982.mp4',
                commentObj:{
                    count:100,
                    list:[{
                        userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642669624&t=028d851350e18512dbf4bfe3a86cbfa4',
                        userNick:'小二',
                        content:'这是一条测试而已',
                        time:'2021-05-06 15:34:44',
                        fabulousCount:3737,
                        children:[{
                            replyTo:'小二',
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F3c%2F12%2F4c%2F3c124c5277386c897dad2977bb964ea1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670117&t=cd32b3baf24c5b3bba4c7516bb211bfe',
                            userNick:'小三',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                        },{
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F1f%2F4f%2F53%2F1f4f53402015d7c738e68e7fdfa4877c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670600&t=b0fbb15006c730305ec59bbfa55d18b9',
                            replyTo:'小三',
                            userNick:'小四',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                        }]
                    }]
                },
                posterUrl: 'https://img-my.csdn.net/uploads/201407/26/1406383291_6518.jpg',
                userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F39%2Fb7%2F53%2F39b75357f98675e2d6d5dcde1fb805a3.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642661023&t=dc2e75969d5509c28c65571534c2cf53'
            }, {
                id: '3',
                isFollow:1,
                isFabulous:1,
                userNick:'姚哥哥',
                videoContent:'这是一条测试',
                fabulousCount: 1,
                commentCount:1000,
                shareCount:499,
                videoUrl: 'https://v-cdn.zjol.com.cn/276984.mp4',
                commentObj:{
                    count:234,
                    list:[{
                        userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642669624&t=028d851350e18512dbf4bfe3a86cbfa4',
                        userNick:'小二',
                        content:'这是一条测试而已',
                        time:'2021-05-06 15:34:44',
                        fabulousCount:3737,
                        children:[{
                            replyTo:'小二',
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F3c%2F12%2F4c%2F3c124c5277386c897dad2977bb964ea1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670117&t=cd32b3baf24c5b3bba4c7516bb211bfe',
                            userNick:'小三',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                        },{
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F1f%2F4f%2F53%2F1f4f53402015d7c738e68e7fdfa4877c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670600&t=b0fbb15006c730305ec59bbfa55d18b9',
                            replyTo:'小三',
                            userNick:'小四',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                        }]
                    }]
                },
                posterUrl: 'https://img-my.csdn.net/uploads/201407/26/1406383291_8239.jpg',
                userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F39%2Fb7%2F53%2F39b75357f98675e2d6d5dcde1fb805a3.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642661023&t=dc2e75969d5509c28c65571534c2cf53'
            }, {
                id: '4',
                isFollow:1,
                isFabulous:0,
                userNick:'姚哥哥',
                videoContent:'这是一条测试',
                fabulousCount: 1,
                commentCount:1000,
                shareCount:499,
                videoUrl: 'https://v-cdn.zjol.com.cn/276985.mp4',
                commentObj:{
                    count:523,
                    list:[{
                        userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642669624&t=028d851350e18512dbf4bfe3a86cbfa4',
                        userNick:'小二',
                        content:'这是一条测试而已',
                        time:'2021-05-06 15:34:44',
                        fabulousCount:3737,
                        children:[{
                            replyTo:'小二',
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F3c%2F12%2F4c%2F3c124c5277386c897dad2977bb964ea1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670117&t=cd32b3baf24c5b3bba4c7516bb211bfe',
                            userNick:'小三',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                        },{
                            userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F1f%2F4f%2F53%2F1f4f53402015d7c738e68e7fdfa4877c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642670600&t=b0fbb15006c730305ec59bbfa55d18b9',
                            replyTo:'小三',
                            userNick:'小四',
                            content:'这是一条测试而已',
                            time:'2021-05-06 15:34:44',
                            fabulousCount:3737,
                        }]
                    }]
                },
                posterUrl: 'https://img-my.csdn.net/uploads/201407/26/1406383290_9329.jpg',
                userHead:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F39%2Fb7%2F53%2F39b75357f98675e2d6d5dcde1fb805a3.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642661023&t=dc2e75969d5509c28c65571534c2cf53'
            }]
        }
    },
    onLoad() {

    },
    methods: {
        refresh(){
            console.log('松开刷新');
            this.videoData = this.videoData.splice(2,2);
        },
        loadMore(){
            console.log('加载更多');
        },
        share(video){
            uni.showToast({
                title:'分享',
                icon:'none'
            });
            console.log(video)
        },
        fabulous(video,flag){
            uni.showToast({
                title:'点赞',
                icon:'none'
            });
            console.log(video,flag)
        },
        follow(video, flag){
            console.log(video,flag)
        },
        commentFabulous(comment){
            console.log(comment)
        }
    }
}
</script>
<style>
.content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...