①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>
①新建 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 中,方法同之前,不再赘述
如果不显示就重新生成一下这里的代码,然后关闭小程序模拟器,重新运行程序
<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>
先给 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>
修改 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>
修改 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;
}
//布局
<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>