栗信博客

石家庄栗信科技有限公司前端外包

UNIAPP

uniapp swiper video 抖音效果 多个视频播放

Bylxcss

1月 17, 2022

要滑到一个视频才播放 ，要对应。
目前这个是 所有的视频全部同时播放

<template>
	<view class="">
		<!--swiper实现整屏划动播放视频-->
		<swiper @change="swiperchange" class="live-swiper" :style="{height:setHeight}" :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" vertical="true" circular="true" :duration="duration">
			<block v-for="(item,index) in video" :key="index">
				<swiper-item style="height:100%; width:100%">
					<video v-if="video[index].play" :id="'myvideo_'+index+key" class="myVideo" style="height:100%; width:100%" :src="item.video" :autoplay="item.play"  object-fit="cover"></video>
					<view class="sw-info-cell">
						<view class="sw-grid">
							<image src="../../static/images/2.jpg" class="avatar"></image><text>爆笑朱晓明</text>
						</view>
						<view class="sw-item">陈翔六点半：击鼓传花，送你回家</view>
						<view class="sw-view-item">播放量：10w</view>
					</view>
					<view class="sw-tabbar">
						<view class="iconfont icon-sandian"></view>
						<view class="sw-action">
							<view class="sw-ac-item" @click="open()">
								<text class="iconfont icon-pinglun"></text><text>1</text>
							</view>
							<view class="sw-ac-item">
								<text class="iconfont icon-xin-k"></text><text>311</text>
							</view>
							<view class="btn-more">查看详情</view>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<uni-popup ref="popup" type="bottom">
			<view class="mp-popup">
				<view class="mp-header">
					<view @click="close()" class="iconfont icon-closex"></view><view class="mp-title">4条评论</view>
				</view>
				<view class="mp-body">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="comment-cells">
							<view class="comment-cell" v-for="(item,index) in 8" :key="index">
								<view class="comment-avatar">
									<image src="../../static/images/2.jpg"></image>
								</view>
								<view class="weui-cell__bd">
									<view class="comment-head">
										<view class="id">Bodv Sefven</view>
										<view class="ac-item"><text class="iconfont icon-xin-k"></text><text>311</text>
										</view>
									</view>
									<view class="comment-body">没有更多评论没有更多评论没有更多评论没有更多评论没有更多评论没有更多评论没有更多评论没有更多评论</view>
									<view class="comment-foot">
										<text class="item">2021-1-2</text><text class="line"></text><text class="replay-link">回复</text>
									</view>
								</view>
							</view>
						</view>
						<view class="load-more">没有更多评论</view>
					</scroll-view>
					<view class="mp-form-bar">
						<view class="weui-cell__bd">
							<input type="text" placeholder="说点什么" class="weui-input" />
						</view>
						<button class="weui-btn">发表</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>



<script>
	export default {

		data() {
			return {
				show: false,
				controls: false,
				setHeight: '',
				hastabbarH: 0,
				changeIndex: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				video: [{
					play: true,
					id: 1,
					video: "https://6365-ceshi-wzezm-1300806314.tcb.qcloud.la/shipin/2.mp4?sign=24c2032c2a8d8b10ee4c1390b7147953&t=1642126035"
				}, {
					play: false,
					id: 2,
					video: "https://6365-ceshi-wzezm-1300806314.tcb.qcloud.la/shipin/1.mp4?sign=d4e0ba2620602c9d3e318165fa42648d&t=1642124283"
				}, {
					play: false,
					id: 3,
					video: "https://6365-ceshi-wzezm-1300806314.tcb.qcloud.la/shipin/2.mp4?sign=24c2032c2a8d8b10ee4c1390b7147953&t=1642126035"
				}, {
					play: false,
					id: 4,
					video: "https://6365-ceshi-wzezm-1300806314.tcb.qcloud.la/shipin/1.mp4?sign=d4e0ba2620602c9d3e318165fa42648d&t=1642124283"
				}]
			}
		},
		onLoad(options) {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.setHeight = (res.windowHeight - _this.hastabbarH) + 'px'
					console.log(_this.setHeight)
				}
			})
		},
		onReady() {
			this.videoplay = uni.createVideoContext('myVideo')
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			swiperchange(e){
				console.log("滑块动了");
				var index=e.detail.current
				
				this.video.forEach((item,index) => {
					console.log(item);
					this.$set(item,"play",false)
				})
				this.video[index].play = true
				
			
			},
		},
		mounted() {}
	}
</script>

<style scoped>
.mp-header{
	position: relative;
	height: 50px;
	padding: 0 24px;
	margin-bottom: 15px;
}
.mp-header .mp-title{
	font-size: 18px;
	line-height: 50px;
	text-align: center;
}
.mp-header .icon-closex{
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
}


.sw-info-cell{
  padding: 30rpx 20rpx;
  position: absolute;
  left: 0;
  bottom:120rpx;
  z-index: 5;
  color: #ffffff;
  font-size: 28rpx;
}
.sw-grid{
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.sw-grid .avatar{
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  margin-right: 20rpx;
}
.sw-item{
  margin-bottom: 10rpx;
}
.sw-view-item{
  font-size: 24rpx;
}
.sw-tabbar{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  padding: 0 30rpx;
  left: 0;
  bottom: 80rpx;
  color: #fff;
}
.sw-action{
  display: flex;
  align-items: center;
  font-size: 26rpx;
}
.sw-ac-item{
  margin-right: 20rpx;
}
.sw-ac-item .iconfont{
  margin-right: 10rpx;
}
.sw-tabbar .btn-more{
  border-radius: 3px;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  background-image: linear-gradient(to right, #fc8d2d , #fc6802);
}
.comment-cells{
  padding-right: 24px;
  padding-left: 24px;
}
.comment-cell{
  display: flex;
}
.comment-avatar{
  margin-right: 20rpx;
}
.comment-avatar image{
  width: 60rpx;
  height: 60rpx;
  border-radius: 80rpx;
}
.load-more{
  color: #999999;
  font-size: 24rpx;
  text-align: center;
  padding: 50rpx 0;
}
.comment-body{
  margin-bottom: 20rpx;
}
.comment-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.comment-head .id{
  color: #999999;
}
.comment-head .ac-item{
  font-size: 24rpx;
}
.comment-head .ac-item .iconfont{
  font-size: 24rpx;
  margin-right: 10rpx;
}
.comment-foot {
  font-size: 24rpx;
}
.comment-foot .item{
  color: #999999;
}
.comment-foot .line{
  display: inline-block;
  margin: 0 10px;
  width: 1px;
  height: 10px;
  background-color: #f5f5f5;
}
.replay-link{
  color: #5e6695;
}
.mp-form-bar{
  display: flex;
  align-items: center;
  padding:12px 15px;
  background-color: #f5f5f5;
}
.mp-form-bar .weui-input{
  height: 36px;
  padding: 0 10px;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 28rpx;
}
.mp-form-bar .weui-btn{
  margin: 0;
  margin-left: 12px!important;
  background-color: #e5e5e5;
  color: #666666;
  font-size: 14px;
  height: 36px;
  width: 70px;
  line-height: 36px;
  border-radius: 4px;
  padding: 0;
  border: 0;
}
.mp-form-bar .weui-btn::after{
	display: none;
}
.mp-popup{
	background-color: #FFFFFF;
	border-radius: 14px 14px 0 0;
	font-size: 28rpx;
}
.weui-cell__bd{
	flex: 1;
}
.live-swiper{
	width: 100%;
}



</style>

By lxcss

Related Post

UNIAPP

判断所有的刘海屏 包括所有品牌

1月 12, 2024 lxcss
UNIAPP

uniapp 小程序 uview u-sticky 适应 苹果 华为的刘海屏

1月 12, 2024 lxcss
UNIAPP

uniapp scroll-view 横向滚动 并点击显示下一item

10月 8, 2023 lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注