question_uniapp/pages/demo/shortVideo.nvue

<template>
	<view class="page">
		<nav-bar type="transparentFixed"></nav-bar>
		<swiper class="video_swiper" vertical :skip-hidden-item-layout="true"  @change="onSwiperChange">
			<swiper-item v-for="(item,index) of 5" :key="index">
				<short-video
					:play="swiperIndex == index"
					src="http://v.weishi.qq.com/shg_1047_1047_0bf2vabpiaacamaltjoj4bpblkae6s7qf4ca.f20.mp4"
					:index="index"
					:progress="progress"
					:progressValue="progressValue"
				></short-video>
				<view class="content_bottom_box">
					<view class="content_goods_info">
						<image class="content_goods_info_image" src="../../static/demo/ic_home_shoppingcart.png" mode="aspectFit"></image>
						<text class="content_goods_info_text">圣芙蕾雅 照烧猪排109g</text>
					</view>
					<text class="content_user_name">@德丽莎·阿波卡利斯</text>
					<text class="content_description">口感非常好吃的猪排，天命独门秘方，让大家垂涎欲滴~</text>
				</view>
				<view class="right_suspended">
					<view class="suspended_user_info">
						<image class="suspended_user_info_image" src="../../static/demo/1.jpg" mode="aspectFill"></image>
						<!-- <image class="suspended_user_info_icon" src="../../static/icon/theme/ic_attention.png" mode="aspectFit"></image> -->
					</view>
					<view class="suspended_features_item">
						<image class="suspended_features_icon" src="../../static/demo/ic_video_phone.png" mode="aspectFit"></image>
						<text class="suspended_features_text">电话</text>
						<!-- <text class="suspended_features_dot">89</text> -->
					</view>
					<view class="suspended_features_item">
						<image class="suspended_features_icon" src="../../static/demo/ic_video_weixin.png" mode="aspectFit"></image>
						<text class="suspended_features_text">微信</text>
						<!-- <text class="suspended_features_dot">89</text> -->
					</view>
					<view class="suspended_features_item" @click="shareShow = true">
						<image class="suspended_features_icon" src="../../static/demo/ic_video_share.png" mode="aspectFit"></image>
						<text class="suspended_features_text">分享</text>
						<!-- <text class="suspended_features_dot">999</text> -->
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="progress_drag" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchcancel="onTouchcancel" @touchend="onTouchend"></view>
	</view>
</template>
<script>
import shortVideo from "@/components/module/short_video.vue"
export default {
	components:{
		shortVideo,
	},
	data() {
		return {
			swiperIndex: 0,
			progress: 10000,
			progressValue: 0,
			shareShow: false
		};
	},
	//第一次加载
	onLoad(e) {
		// 隐藏原生的tabbar
		// uni.hideTabBar();
		let systemInfo = uni.getSystemInfoSync();
		this.screenWidth = systemInfo.screenWidth;
	},
	//页面显示
	onShow() {
		// 隐藏原生的tabbar
		// uni.hideTabBar();
		// #ifdef APP-PLUS
		uni.showModal({
			title: "提示",
			content: "APP体验效果不好，暂没做兼容",
			showCancel:false
		});
		// #endif
	},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onSwiperChange(e){
			this.swiperIndex = e.detail.current;
		},
		onTouchstart(e) {
			this.progress = 0;
		},
		// 手指触摸后移动
		onTouchmove(e) {
			//手指当前坐标
			// #ifdef APP-NVUE
			const clientX = e.changedTouches[0].screenX;
			// #endif
			// #ifndef APP-NVUE
			const clientX = e.changedTouches[0].clientX;
			// #endif
			this.progress = parseInt((clientX / this.screenWidth) * 100);
		},
		// 手指触摸动作被打断，如来电提醒，弹窗
		onTouchcancel(e) {
			// #ifdef APP-NVUE
			this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
			// #endif
			// #ifndef APP-NVUE
			this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
			// #endif
			
		},
		// 手指触摸动作结束
		onTouchend(e) {
			// #ifdef APP-NVUE
			this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
			// #endif
			// #ifndef APP-NVUE
			this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
			// #endif
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.page {
	background-color: #1a1b20;
	width: 750rpx;
	position: relative;
}
.progress_drag {
	position: absolute;
	bottom: 0rpx;
	left: 0;
	width: 100%;
	padding: 15rpx 0;
	z-index: 5;
}
.video_swiper {
	width: 750rpx;
	height: calc(100vh - var(--window-bottom));
}
.video_file {
	width: 750rpx;
	height: 100%;
}
.content_bottom_box {
	position: absolute;
	bottom: 0rpx;
	width: 750rpx;
	padding: 0 0rpx 40rpx 0rpx;
	background-image: linear-gradient(to, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
	align-items: flex-start;
	z-index: 1;
}
.content_goods_info {
	height: 49rpx;
	flex-direction: row;
	align-items: center;
	background-color: rgba($color: #000000, $alpha: 0.4);
	padding: 0 12rpx;
	margin: 0 182rpx 0 40rpx;
}
.content_goods_info_image {
	width: 24rpx;
	height: 24rpx;
}
.content_goods_info_text {
	font-size: 24rpx;
	color: #ffffff;
	margin-left: 12rpx;
}
.content_user_name {
	font-size: 36rpx;
	color: #ffffff;
	font-weight: bold;
	margin: 70rpx 182rpx 0 40rpx;
}
.content_description {
	font-size: 28rpx;
	color: #ffffff;
	margin: 30rpx 182rpx 0 40rpx;
}
.right_suspended {
	position: absolute;
	right: 30rpx;
	bottom: 280rpx;
	align-items: center;
}
.suspended_user_info {
	position: relative;
}
.suspended_user_info_image {
	width: 120rpx;
	height: 120rpx;
	border: solid 2rpx #ffffff;
	border-radius: 50%;
}
.suspended_user_info_icon {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(50%);
}
.suspended_features_item {
	align-items: center;
	position: relative;
	margin-top: 80rpx;
}
.suspended_features_icon {
	width: 48rpx;
	height: 48rpx;
}
.suspended_features_text {
	margin-top: 12rpx;
	font-size: 28rpx;
	color: #ffffff;
}
.suspended_features_dot {
	font-size: 20rpx;
	color: #ffffff;
	position: absolute;
	top: -10rpx;
	right: 0;
	transform: translateX(50%);
	height: 24rpx;
	background-color: #ff3682;
	border-radius: 12rpx;
	line-height: 24rpx;
	padding: 0 9rpx;
}
</style>