1.使用轮播图进行循环视频
2.动态绑定进行id进行开始和暂停视频
3.默认只有第一个视频进行播放
4.滑动后只播放一个，并将滚动条时间为0
<template>
<view>
<swiper class="swiper" :vertical="true" circular :duration="500" @change="change" style="min-height:100vh;"
:circular="false">
<swiper-item v-for="item,index in list" :key="index">
<video @click="handlePlay(index)" :id="'myVideo'+index" :muted="false" loop
:show-fullscreen-btn="false" object-fit="contain" :src="item.videoAddress"
:show-play-btn="false"
:show-center-play-btn="true">
<view v-if="playShow" class="d-center t-c" style="position: absolute;width: 100%;height: 100%;">
<view class="play-right" >
<u-icon name="play-right-fill" size="120" color="#fff"></u-icon>
</view>
</view>
</video>
<!-- -->
<view class="video-right">
<image @click="GoDetails(item)" :src="item.avatar" mode=""></image>
<!-- <view class="circle">
<u-icon name="plus" size="28" color="#fff"></u-icon>
</view> -->
<view class="mt" @click="heart(item)" v-if="!item.likeType">
<u-icon name="heart" size="60" color="#fff"></u-icon>
<view class="">{{item.likeNum}}</view>
</view>
<view class="mt" v-else>
<u-icon name="heart-fill" size="60" color="var(--themeColor)"></u-icon>
<view class="">{{item.likeNum}}</view>
</view>
<view class="mt u-m-t-20" @click.stop="chat(item)">
<u-icon name="chat" size="60" color="#fff"></u-icon>
<view class="">{{item.commentNum}}</view>
</view>
<!-- <view class="mt">
<u-icon name="star" size="40" color="#fff"></u-icon>
<view class="">{{item.collectNum}}</view>
</view>
<view class="mt">
<u-icon name="share" size="40" color="#fff"></u-icon>
<view class="">{{item.forwardNum}}</view>
</view> -->
</view>
<view class="video-bottom">
<view class="name">@{{item.userName}}</view>
<view class="details">{{item.title}}</view>
</view>
<view class="">222</view>
</swiper-item>
</swiper>
<!-- 评论弹出层 -->
<view v-if="show" class="ppppppppppppppp">
<view class="d-between top-commit">
<view class=""></view>
<view class="">全部评论</view>
<view class="">
<u-icon name="close" size="40" @click="show = false"></u-icon>
</view>
</view>
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
<view class="char-list">
<view class="" v-for="(itm,idx) in charts" :key="idx" class="chat">
<view class="d-flex">
<view class="">
<image :src="itm.avatar" class="bigavatar" mode=""></image>
</view>
<view style="width: 100%;">
<view>
<view class="comment">{{itm.userName}}</view>
<view class="recommit">{{itm.content}}</view>
<view class="d-flex">
<view class="time">{{itm.time}}</view>
<view class="reply" @click.stop="inputFocus(itm,idx)">回复</view>
</view>
</view>
<view class="collapse " v-if="itm.replies.length !== 0">
<view class="d-flex" style="margin-top: 10px;" v-for="(im,ix) in itm.replies"
:key="ix" v-show="bomContent">
<image class="replies-img" :src="im.avatar" mode=""></image>
<view class="" style="width: 250px;margin-left: 10px;">
<view class="comment">{{im.userName}}</view>
<view class="recommit" style="color: #000;">{{im.content}}</view>
<view class="d-flex">
<view class="time">{{im.time}}</view>
</view>
</view>
</view>
<view class="more-tit" @click="CommentShow()">一一 点击查看{{itm.replies.length}}条评论
</view>
</view>
</view>
</view>
</view>
<view class="" style="height: 100rpx;"></view>
<u-loadmore :status="status" />
<view class="a-center bom" v-if="goodKey">
<u-input v-model="value" class="ipt" :clearable="false" cursorSpacing="30" :border="true"
placeholder="请输入您的评论内容">
</u-input>
<view v-if="value" @click="send()" class="weiBtn">发送</view>
<view v-else class="zhiBtn">发送</view>
</view>
<view class="a-center bom" v-if="keyword">
<u-input v-model="value" class="ipt" :clearable="false" :focus="keyword" cursorSpacing="30"
:border="true" placeholder="请输入您的回复内容">
</u-input>
<view v-if="value" @click="send()" class="weiBtn">发送</view>
<view v-else class="zhiBtn">发送</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
params: {
pageNum: 1,
pageSize: 20,
},
chart: {
dynamicId: '',
pageNum: 1,
pageSize: 10,
},
list: [],
charts: [],
show: false,
status: '正在加载',
playShow: false,
commentId: '',
userId: "",
keyword: false,
goodKey: false,
bomContent: false
}
},
mounted() {
// 循环视频
this.$api.dynamicList(this.params).then(res => {
this.list = res.data.records
})
this.showVideo()
},
methods: {
// 默认只有第一个视频进行播放
showVideo() {
// // mounted首次触发没有index
let currentId = 'myVideo' + 0;
this.videoContext = uni.createVideoContext(currentId)
console.log(this.videoContext)
// html中video默认是全部不播放
//然后在这里设置只播放第一个视频
this.$api.dynamicList(this.params).then(res => {
this.list = res.data.records
this.list.forEach((item, idx) => {
let temp = 'myVideo' + idx
if (temp === currentId) {
uni.createVideoContext(temp).play();
}
})
})
},
// 暂停视频
handlePlay(index) {
// 获取当前视频id，以及他的对象方法
let currentId = 'myVideo' + index;
this.videoContext = uni.createVideoContext(currentId)
console.log(this.$refs.child)
//暂停视频播放事件
if (!this.playShow) {
this.videoContext.pause()
this.playShow = true
} else {
this.videoContext.play()
this.playShow = false
}
},
// 滑动视屏触发
change(item) {
this.params.pageNum++
this.$api.dynamicList(this.params).then(res => {
this.list.push(...res.data.records)
let currentId = 'myVideo' + item.detail.current;
this.videoContext = uni.createVideoContext(currentId)
this.videoContext.play()
// 滑动后滚动条时间为0
this.videoContext.seek(0)
this.list.forEach((item, idx) => {
let temp = 'myVideo' + idx
if (temp !== currentId) {
uni.createVideoContext(temp).pause();
}
})
})
this.chart.pageNum = 1
this.playShow = false
this.keyword = false
},
// 评论展示
CommentShow() {
this.bomContent = !this.bomContent
},
// 评论列表触底加载
scrolltolower() {
this.chart.pageNum++
this.$api.commentListDy(this.chart).then(res => {
if (this.chart.pageNum <= res.data.pages) {
this.charts.push(...res.data.records)
} else {
this.$until.error('没有更多了');
}
})
},
// 点赞·1
heart(item) {
let hear = {
topicType: 5,
topicId: item.dynamicId
}
this.$api.like(hear).then(res => {
if (res.code == 200) {
item.likeType = true
item.likeNum++
}
})
},
GoDetails(item) {
uni.navigateTo({
url: 'ChefCircle-details?userId=' + item.userId
})
},
// 发送
send() {
if (!this.commentId) {
let commitCont = {
type: 0,
topicType: 5,
content: this.value,
topicId: this.chart.dynamicId
}
this.$api.comment(commitCont).then(res => {
if (res.code == 200) {
this.$api.commentListDy(this.chart).then(res => {
this.charts = res.data.records
})
this.value = ''
this.goodKey = true
}
})
} else {
let commitCont = {
type: 1,
topicType: 5,
content: this.value,
topicId: this.commentId,
toUserId: this.userId
}
this.$api.comment(commitCont).then(res => {
if (res.code == 200) {
this.$api.commentListDy(this.chart).then(res => {
this.charts = res.data.records
})
this.value = ''
this.commentId = ''
this.keyword = false
this.goodKey = true
}
})
}
},
// 回复调用input
inputFocus(item, index) {
this.userId = item.userId
this.commentId = item.commentId
this.keyword = true
// this.goodKey = true
},
// 初始化评论列表
chat(item) {
this.chart.dynamicId = item.dynamicId
this.chart.pageNum = 1
this.$api.commentListDy(this.chart).then(res => {
if (res.code == 200) {
this.charts = res.data.records
this.show = true
this.keyword = false
this.goodKey = true
}
})
},
},
}
</script>
<style lang="scss" scoped>
.weiBtn {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 30rpx;
width: 150rpx;
color: #fff;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: var(--themeColor);
}
.zhiBtn {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 30rpx;
width: 150rpx;
color: #999;
margin-left: 20rpx;
border-radius: 10rpx;
background-color: #e6e6e6;
}
.replies-img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
page {
width: 100%;
height: 100%;
background-color: #000;
}
.ppppppppppppppp {
width: 100%;
position: absolute;
bottom: 98rpx;
height: 800rpx;
border-radius: 20rpx 20rpx 0 0;
background: #fff;
.top-commit {
padding: 30rpx 30rpx 0 30rpx;
font-weight: 800;
font-size: 32rpx;
}
}
.scroll-Y {
height: 760rpx;
}
.play-right {
// width: 150rpx;
// height: 150rpx;
// background: #fff;
border-radius: 50%;
opacity: .6;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.uni-margin-wrap {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
}
.swiper-item {
display: block;
text-align: center;
}
.bom {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px 10px;
width: 100%;
background: #fff;
.ipt {
border-radius: 30px;
// background: #eee;
width: 100%;
}
}
.char-list {
padding: 0 10px;
.pop-tit {
font-weight: bold;
font-size: 12px;
color: #000;
position: fixed;
width: 98%;
background: #fff;
height: 30px;
top: 0;
left: 0;
z-index: 2;
}
.chat {
display: flex;
margin-top: 10px;
.bigavatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.more-tit {
color: #999;
margin: 10rpx;
font-size: 12px;
}
.name {
font-size: 12px;
color: #bbb;
}
.comment {
margin: 0 5px;
font-size: 12px;
color: #999;
}
.recommit {
margin: 10rpx;
}
.time {
font-size: 12px;
color: #ccc;
}
.reply {
font-size: 12px;
margin-left: 20rpx;
color: #59AAFF;
}
}
}
.video-right {
position: absolute;
height: 100px;
height: 400px;
z-index: 999;
top: 50%;
right: 10px;
color: #fff;
margin-right: 5px;
text-align: center;
image {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
border: 2rpx solid #bbb;
margin-bottom: 30rpx;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ff0000;
text-align: center;
line-height: 20px;
position: absolute;
top: 35px;
left: 25%;
}
.mt {
margin-top: 8px;
}
}
.video-bottom {
position: absolute;
bottom: 100px;
font-weight: bold;
color: #fff;
left: 10px;
.details {
font-weight: 400;
margin: 10rpx;
}
}
</style>
07-15
02-03
2954
2954
11-17
6642
6642
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
