uniapp小视频项目:左侧信息栏、右侧图标栏开发

文章目录

    • 1、添加左侧信息栏
    • 2、右侧图标栏开发
    • 3、给cd添加旋转动画
    • 4、给音乐添加滚动动画
    • 5、关注
    • 6、收藏

1、添加左侧信息栏

①components 增加 listLeft.vue 组件

<template>
	<view class="listLeft">
		<view class="author">
			作者
		</view>
		<view class="title">
			标题
		</view>
		<view class="music">
			月光
		</view>
	</view>
</template>

<script>
	export default {
		name:"listLeft",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.listLeft{
	width: 150px;
	height: 150px;
	margin-left: 10px;
	color: #ffffff;
}
.author{
	height: 35px;
	line-height: 35px;
	font-size: 15px;
}
.title{
	line-height: 22px;
	font-size: 12px;
	width: 100%;
	word-wrap: break-word;
}
.music{
	height: 35px;
	line-height: 35px;
	font-size: 12px;
}
</style>

②video-list.vue中引入并使用

<template>
	<view class="videoList">
		<view class="video-box">
			<swiper class="swiper" :vertical="true">
				<swiper-item v-for="item of list" :key="item.id">
					<view class="swiper-item">
						<videoPlayer :video="item"></videoPlayer>
					</view>
					<view class="left-box">
						<listLeft></listLeft>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	......
	import listLeft from './listLeft.vue'
	export default {
		props: ["myList"],
		components: {
			videoPlayer,
			listLeft
		},
		......
	}
</script>

<style>
	......
	.left-box{
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}
</style>

查看效果:
uniapp小视频项目:左侧信息栏、右侧图标栏开发_第1张图片

2、右侧图标栏开发

①新建 listRight 组件

②引入 video-list.vue 并使用

<template>
	<view class="videoList">
		<view class="video-box">
			<swiper class="swiper" :vertical="true">
				<swiper-item v-for="item of list" :key="item.id">
					......
					<view class="right-box">
						<listRight></listRight>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	......
	import listRight from './listRight.vue'
	export default {
		props: ["myList"],
		components: {
			videoPlayer,
			listLeft,
			listRight
		},
		......
	}
</script>

<style>
	......
	.right-box{
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
	}
</style>

③下载相关图片,放入 static 中,包括头像、cd图片
④在 iconfont 中下载 爱心、评论、分享图片到本地,将 iconfont.css 复制到 App.vue 中,方法同之前,不再赘述

如果不显示就重新生成一下这里的代码,然后关闭小程序模拟器,重新运行程序
uniapp小视频项目:左侧信息栏、右侧图标栏开发_第2张图片

<style>
	html,body{
		width: 100%;
		height: 100%;
	}
@font-face {
  font-family: 'iconfont';  /* Project id 3229950 */
  src: url('https://at.alicdn.com/t/font_3229950_mzjwx2trlo.woff2?t=1646809145778') format('woff2'),
       url('https://at.alicdn.com/t/font_3229950_mzjwx2trlo.woff?t=1646809145778') format('woff'),
       url('https://at.alicdn.com/t/font_3229950_mzjwx2trlo.ttf?t=1646809145778') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-xin:before {
  content: "\e622";
}

.icon-pinglun:before {
  content: "\e63a";
}

.icon-fenxiang:before {
  content: "\e72f";
}

.icon-jiahao:before {
  content: "\eaf3";
}

.icon-sousuo:before {
  content: "\eafe";
}

.icon-xiangzuo:before {
  content: "\eb15";
}


</style>

⑤完善 listRight.vue 组件

<template>
	<view class="listRight">
		<view class="author-img">
			<image class="img" src="../static/profile.webp" mode=""></image>
		</view>
		<view class="iconfont icon-xin right-box"></view>
		<view class="number">111</view>
		<view class="iconfont icon-pinglun right-box"></view>
		<view class="number">222</view>
		<view class="iconfont icon-fenxiang right-box"></view>
		<view class="number">333</view>
		<view class="round">
			<image class="img" src="../static/cd.jpeg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "listRight",
		data() {
			return {

			};
		}
	}
</script>

<style>
	.listRight {
		width: 50px;
		margin: 0 auto;
	}

	.author-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 1px solid #ffffff;
	}

	.img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.right-box {
		width: 50px;
		height: 40px;
		margin-top: 13px;
		text-align: center;
		line-height: 40px;
		color: #ffffff;
		font-size: 33px;
	}

	.number {
		font-size: 10px;
		text-align: center;
		color: #ffffff;
	}
	.round{
		margin-top: 13px;
	}
</style>

目前效果:
uniapp小视频项目:左侧信息栏、右侧图标栏开发_第3张图片

3、给cd添加旋转动画

先给 cd 增加旋转动画

......

<style>
	......
	.round{
		margin-top: 13px;
		animation: rotate 1.5s infinite;
		width: 50px;
		height: 50px;
	}
	
	@keyframes rotate{
		0%{
			transform:rotate(0deg)
		}
		100%{
			transform:rotate(360deg)
		}
	}
</style>

查看效果
uniapp小视频项目:左侧信息栏、右侧图标栏开发_第4张图片

4、给音乐添加滚动动画

修改 listLeft.vue

<template>
	<view class="listLeft">
		<view class="author">
			作者
		</view>
		<view class="title">
			标题
		</view>
		<view class="box">
			<view class="music">
				@我们的恋爱是对生命的严重浪费@
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"listLeft",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.listLeft{
	width: 150px;
	height: 150px;
	margin-left: 10px;
	color: #ffffff;
}
.author{
	height: 35px;
	line-height: 35px;
	font-size: 15px;
}
.title{
	line-height: 22px;
	font-size: 12px;
	width: 100%;
	word-wrap: break-word;
}
.box{
	width: 150px;
	overflow: hidden;
}
.music{
	height: 35px;
	line-height: 35px;
	font-size: 12px;
	width: 200px;
	animation: music 4s linear 0.2s infinite ;
}

@keyframes music{
	0%{
		transform: translate3d(80%,0,0);
	}
	100%{
		transform: translate3d(-80%,0,0);
	}
}
</style>

查看效果
uniapp小视频项目:左侧信息栏、右侧图标栏开发_第5张图片

5、关注

uniapp小视频项目:左侧信息栏、右侧图标栏开发_第6张图片

修改 listRight.vue,在头像下增加一个加号,并修改样式。同时添加一个点击事件,在点击后隐藏

//布局
<view class="author-img">
	<image class="img" src="../static/profile.webp" mode=""></image>
	<view class="iconfont icon-jiahao add" v-show="show" @click="hide"></view>
</view>

//js
methods:{
	hide(){
		this.show = false;
	}
}

//样式
.author-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 1px solid #ffffff;
		position: relative;
	}
	
	.add{
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #FF0000;
		color: #FFFFFF;
		position: absolute;
		bottom: -9px;
		left: 16px;
		text-align: center;
		line-height: 18px;
		font-size: 10px;
	}

6、收藏

在这里插入图片描述
修改 listRight.vue

//布局
<view class="iconfont icon-xin right-box" :style="color" @click="changeColor"></view>

//js
<script>
	export default {
		name: "listRight",
		data() {
			return {
				show: true,
				color: ""
			};
		},
		methods: {
			hide() {
				this.show = false;
			},
			changeColor() {
				this.color = this.color === '' ? 'color: red;' : ''
			}
		}
	}
</script>

你可能感兴趣的:(uni-app快速上手,vue.js,前端)