高性能短视频滑动组件

更新记录

v1.0.0（2024-04-26）

初始化

平台兼容性

Vue2	Vue3
√	×

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

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

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

{ this.resetVideoList() this.refreshing = false },200) }, resetVideoList() { this.query.page = 1 this.current = 0 this.isEmpty = false this.list = [] this.getVideoList() this.$nextTick(()=>{ this.$refs["listBox"].resetLoadmore(); }) }, // 下一页 loadmore() { this.query.page = this.query.page + 1 this.getVideoList() console.log('加载下一页：'+this.query.page) }, getVideoList() { let ajaxFun = null if(this.tabActive == 0) { ajaxFun = contentGetContentMainPublicList } else if(this.tabActive == 1) { ajaxFun = contentGetUserFollowContentMain } else if(this.tabActive == 2) { ajaxFun = contentGetPopularContentMain } ajaxFun(this.query).then(res=>{ if(res.code == 200) { console.log('请求结果：', res.data) res.data.data.forEach(v=>{ if(v.type == 1) { v.isPay = false } this.list.push(v) }) this.getCenterState() if(this.list.length <= 0) { this.isEmpty = true } } }) }, // 获取内容关联状态 getCenterState() { // 获取针对当前人的关注状态 const item = this.getOpenVideoItem() if(item) { getUserCenterState({id: item.id}).then(res=>{ if(res.code == 200) { if(res.data) { this.itemState = res.data } else { this.itemState = {} } } }) } }, getVideoDom() { const id = `video${this.current}` const videoContent = uni.createVideoContext(id); return videoContent }, // 获取当前打开视频的 item getOpenVideoItem() { return this.list[this.current] }, scrolls (event) { const isDragging = event.isDragging // true 正在滚动 const i = Math.round(Math.abs(event.contentOffset.y) / this.systemInfo.windowHeight) console.log(`滚动对象---：i:${i}isDragging:${isDragging},contentOffset.y:${event.contentOffset.y},windowHeight:${this.systemInfo.windowHeight}`) if (!event.isDragging) { // 停止滚动后执行事项 if(i !== this.current){ this.current = i this.$nextTick(()=>{ this.getCenterState() this.payVideo() // if(this.current >= this.list - 1){ // this.loadmore() // } }) } } }, // 播放视频 payVideo() { console.log('触发播放', this.current) this.stopVideos() const videoItem = this.getOpenVideoItem() const videoContent = this.getVideoDom() if(videoContent && videoItem['type'] == 1) { this.$nextTick(() => { videoContent.play() }) } }, pauseVideo() { console.log('暂停播放', this.current) const videoItem = this.getOpenVideoItem() const videoContent = this.getVideoDom() if(videoContent && videoItem['type'] == 1) { videoContent.pause() } }, // 视频播放事件 playVideoAsync(item, i) { console.log('视频播放事件', item, i) item.isPay = true }, pauseVideoAsync(item, i) { console.log('视频暂停事件',item, i) item.isPay = false }, endedVideoAsync(item, i) { console.log('视频结束事件',item, i) item.isPay = false }, setNav(i, e) { if(this.isDebounce) { console.log('执行测试') this.isDebounce = false this.tabActive = i this.resetVideoList() setTimeout(()=>{ this.isDebounce = true }, 500) } // #ifdef APP-NVUE e.stopPropagation() // #endif }, stopVideos() { this.list.forEach((item, index) => { if(item.type == 1 && item.isPay) { const id = `video${index}` const videoContent = uni.createVideoContext(id); if(videoContent) { videoContent.pause() } } }) }, setVideoPayIs(item, index, e) { console.log('点击视频', item, index, e) if(item.type == 1) { const videoContent = this.getVideoDom() if(videoContent) { if(item.isPay) { videoContent.pause() } else { videoContent.play() } } } // #ifdef APP-NVUE if(e) { e.stopPropagation() } // #endif }, shareVideo(item) { this.$refs['share'].open(item) }, getDiscuss(item) { this.$refs['discuss'].open(item) }, contentPreview(nodes) { this.$refs['contentPreview'].open(nodes) }, // 关注他人 setUserFollow(uid) { setUserFollow({followId: uid}).then(res=>{ if(res.code == 200) { let msg = '' if(res.data.state == 1) { msg = '关注成功' } else { msg = '取消关注成功' } uni.showToast({ icon: 'success', title: msg }) setTimeout(()=>{ this.getCenterState() }, 600) } }) }, // 给内容点赞 setCenterLike(item) { setCenterLike({id: item.id}).then(res=>{ if(res.code == 200) { let msg = '' if(res.data.state == 1) { msg = '点赞成功' } else { msg = '取消点赞成功' } uni.showToast({ icon: 'success', title: msg }) setTimeout(()=>{ this.getCenterState() }, 600) } }) }, // 给内容收藏取消收藏 setCenterCollect(item) { setCenterCollect({id: item.id}).then(res=>{ if(res.code == 200) { let msg = '' if(res.data.state == 1) { msg = '收藏成功' } else { msg = '取消收藏成功' } uni.showToast({ icon: 'success', title: msg }) setTimeout(()=>{ this.getCenterState() }, 600) } }) }, } } <style scoped> .content { background: #000000; } .header{ position: fixed; height: 230rpx; top: 0; left: 0; background-image:linear-gradient(to bottom,rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0)); } .header .navs{ height: 88rpx; flex-direction: row; align-items: center; justify-content: center; } .header .navs .box{ position: relative; height: 88rpx; width: 140rpx; flex-direction: column; align-items: center; justify-content: center; } .header .navs .box .line{ position: absolute; bottom: 0; width: 50rpx; height: 8rpx; border-radius: 4rpx; background: #ffffff; left: 45rpx; bottom: 0; } .header .navs .box .name{ font-weight: bold; font-size: 36rpx; color: #A5A6A0; } .header .navs .box.active .name{ color: #FFFFFF; } .layout-main{ position: relative; } .poster{ position: absolute; } .user-info{ position: absolute; } .video-pay{ width: 60px; height: 60px; position: absolute; } .loading{ padding: 16px; justify-content: center; align-items: center; } .loading .name{ font-size: 12px; color: #ffffff; font-weight: bold; } .empy{ background: #000000; position: absolute; top: 0; left: 0; justify-content: center; align-items: center; } .absole{ position: absolute; } </style>