更新记录

1.1.4（2022-03-31） 下载此版本

优化视频重复出现bug

1.1.3（2021-09-15） 下载此版本

新增拖动视频进度条

1.1.2（2021-08-23） 下载此版本

新增暂停图标，优化进度条

平台兼容性

导入插件

import kaiVideoSwiper from '@/components/kai-video-swiper/kai-video-swiper.nvue'

注册插件

components: {
kaiVideoSwiper
}

使用插件

<kai-video-swiper 
    ref="swiper" 
    @setVideoList="addData($event,true)" 
    @tapHead="tapHead" 
    @tapFollow="tapFollow"
    @tapShare="tapShare" 
    @tapDetail="tapDetail" 
    @tapLove="tapLove" 
    @tapComment="tapComment"
    @tapCommentLove="tapCommentLove" 
    @setCommentList="setCommentList" 
    @send="send"
    @change="change"
    @tapActive = 'tapActive'
    @tapLive = 'tapLive'
    @tapSearch = 'tapSearch'
    @refresh = 'refresh'
    cover
    timingFunction = 'ease'
    preview
    :progressTime = '10'
    >
</kai-video-swiper>

属性说明

方法

this.$refs.swiper.previewVideo(index,list) //设置预览视频参数
this.$refs.swiper.setShareFriend(arr) //设置分享朋友列表
this.$refs.swiper.stop() //暂停播放
this.$refs.swiper.changeLove() //点赞（改变颜色）
this.$refs.swiper.changeFollow() //关注 （关注以后加号隐藏）
this.$refs.swiper.commentInit(data,noData) //渲染评论列表,如果没有数据noData为true
this.$refs.swiper.frontAddData(commentList) //评论头部添加数据
this.$refs.swiper.changeCommentLove() //评论点赞
this.$refs.swiper.setCommentData(commentList, noData)  //评论追加数据，如果评论列表没有数据后，noData为true
this.$refs.swiper.sendOver()  //发送评论后收回键盘
this.$refs.swiper.init(videoData.data) //初始化视频列表
this.$refs.swiper.setVideoData(videoData.data)  //追加数据 每次滑动到倒数第4个视频后会触发@setVideoList 配套使用
this.$refs.swiper.topShow(true) //是否展示头部信息（包括推荐，关注，地点，直播，搜索）默认不显示
this.$refs.swiper.setPlace('浦东') //设置地点
this.$refs.swiper.setFollowNum(1) //设置关注右上角数字，如果为0，则不显示
this.$refs.swiper.setPlaceNum(2) //设置地点右上角数字，如果为0，则不显示
this.$refs.swiper.setRecommendNum(0) //设置推荐右上角数字，如果为0，则不显示
this.$refs.swiper.showLive(true) //是否显示直播图标，默认显示
this.$refs.swiper.setTabBarHeight(50) //设置tabBar高度，用于评论弹出输入框与键盘顶部无缝衔接，默认为0

优化建议

1.拖动进度条功能：视频时长如果太短不建议拖动，视频时长最好在20秒以上，因为在某些android机上，
                拖动的时间少于10秒，容易造成进度条定位不成功，导致视频重新从头开始播放的bug。
                如果是长视频，不存在此bug

邮箱

lkp_kpl@163.com