添加音乐页面，吐槽下bscroll并不好用
zyronon
@ -1,6 +1,13 @@
|
|||||||
# 此代码仅供学习，请勿用于商业用途
|
# 此代码仅供学习，请勿用于商业用途
|
||||||
|
|
||||||
# 使用 Vue 模仿抖音, 本项目持续更新
|
# 使用 Vue 模仿抖音, 本项目持续更新
|
||||||
|
|
||||||
### 开源不易，麻烦给个 Star★ 吧(☺️ 右上角点击 ★Star，轻轻松松，一秒钟 🤣)！我会根据大家的关注度和个人时间持续更新代码！
|
### 开源不易，麻烦给个 Star★ 吧(☺️ 右上角点击 ★Star，轻轻松松，一秒钟 🤣)！我会根据大家的关注度和个人时间持续更新代码！
|
||||||
|
|
||||||
目前由于视频没有上传到github，需要自己src/assets/video目录下 创建名字为1-10的mp4
|
目前由于视频没有上传到github，需要自己src/assets/video目录下 创建名字为1-10的mp4
|
||||||
|
|
||||||
|
TODO
|
||||||
|
|
||||||
|
#### 图片懒加载
|
||||||
|
|
||||||
|
#### 点击喜欢，特效
|
||||||
@ -41,6 +41,8 @@
|
|||||||
<script crossorigin="anonymous"
|
<script crossorigin="anonymous"
|
||||||
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
||||||
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
BIN
src/assets/img/icon/avatar/0.png
Normal file
|
After Width: | Height: | Size: 458 KiB |
|
Before Width: | Height: | Size: 577 B |
|
Before Width: | Height: | Size: 596 B |
|
Before Width: | Height: | Size: 583 B |
|
Before Width: | Height: | Size: 562 B |
|
Before Width: | Height: | Size: 543 B |
|
Before Width: | Height: | Size: 595 B |
|
Before Width: | Height: | Size: 560 B |
|
Before Width: | Height: | Size: 547 B |
|
Before Width: | Height: | Size: 557 B |
|
Before Width: | Height: | Size: 580 B |
|
Before Width: | Height: | Size: 613 B |
|
Before Width: | Height: | Size: 486 B |
|
Before Width: | Height: | Size: 611 B |
|
Before Width: | Height: | Size: 532 B |
BIN
src/assets/img/icon/components/im0.webp
Normal file
|
After Width: | Height: | Size: 430 B |
BIN
src/assets/img/icon/components/im1.webp
Normal file
|
After Width: | Height: | Size: 506 B |
BIN
src/assets/img/icon/components/im2.webp
Normal file
|
After Width: | Height: | Size: 510 B |
BIN
src/assets/img/icon/components/im3.webp
Normal file
|
After Width: | Height: | Size: 458 B |
BIN
src/assets/img/icon/components/img.webp
Normal file
|
After Width: | Height: | Size: 468 B |
BIN
src/assets/img/icon/components/imh.webp
Normal file
|
After Width: | Height: | Size: 452 B |
BIN
src/assets/img/icon/components/imi.webp
Normal file
|
After Width: | Height: | Size: 444 B |
BIN
src/assets/img/icon/components/imj.webp
Normal file
|
After Width: | Height: | Size: 418 B |
BIN
src/assets/img/icon/components/imk.webp
Normal file
|
After Width: | Height: | Size: 468 B |
BIN
src/assets/img/icon/components/iml.webp
Normal file
|
After Width: | Height: | Size: 438 B |
BIN
src/assets/img/icon/components/imm.webp
Normal file
|
After Width: | Height: | Size: 426 B |
BIN
src/assets/img/icon/components/imn.webp
Normal file
|
After Width: | Height: | Size: 434 B |
BIN
src/assets/img/icon/components/imo.webp
Normal file
|
After Width: | Height: | Size: 476 B |
BIN
src/assets/img/icon/components/imp.webp
Normal file
|
After Width: | Height: | Size: 486 B |
BIN
src/assets/img/icon/components/imq.webp
Normal file
|
After Width: | Height: | Size: 396 B |
BIN
src/assets/img/icon/components/imr.webp
Normal file
|
After Width: | Height: | Size: 480 B |
BIN
src/assets/img/icon/components/ims.webp
Normal file
|
After Width: | Height: | Size: 410 B |
BIN
src/assets/img/icon/components/imt.webp
Normal file
|
After Width: | Height: | Size: 496 B |
BIN
src/assets/img/icon/components/imu.webp
Normal file
|
After Width: | Height: | Size: 444 B |
BIN
src/assets/img/icon/components/imv.webp
Normal file
|
After Width: | Height: | Size: 408 B |
BIN
src/assets/img/icon/components/imw.webp
Normal file
|
After Width: | Height: | Size: 434 B |
BIN
src/assets/img/icon/components/imx.webp
Normal file
|
After Width: | Height: | Size: 450 B |
BIN
src/assets/img/icon/components/imy.webp
Normal file
|
After Width: | Height: | Size: 496 B |
BIN
src/assets/img/icon/components/imz.webp
Normal file
|
After Width: | Height: | Size: 496 B |
BIN
src/assets/img/icon/components/video/heart1.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/icon/components/video/pink.png
Normal file
|
After Width: | Height: | Size: 808 B |
BIN
src/assets/img/icon/dv2.webp
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/img/icon/f1c.webp
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/img/icon/g+x.webp
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
@ -1 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539708547888" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M739.584 70.592c-92.224 0-177.792 63.04-228.224 109.568C460.864 133.632 375.36 70.592 283.008 70.592 108.48 70.592 0 176.96 0 348.16 0 492.8 130.688 608.256 131.2 608.64l340.544 328.512c10.432 10.432 24.448 16.256 39.552 16.256s29.056-5.824 39.296-16l341.248-328.64c30.656-29.376 130.752-134.848 130.752-260.544C1022.656 176.96 914.176 70.592 739.584 70.592z" p-id="1477" fill="#e73a57"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 786 B |
BIN
src/assets/img/icon/share-white-full.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/img/icon/share-white.png
Normal file
|
After Width: | Height: | Size: 6.9 KiB |
@ -1 +0,0 @@
|
|||||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539615220711" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14876" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M621.110023 141.28277c-10.939143-10.93505-26.768667-15.935947-40.191374-6.538927-12.669554 8.868995-12.56313 19.051915-12.56313 29.986965l0 158.582785c-224.199225 0-437.464423 185.92041-437.464423 410.119635 0 60.151985 27.340695 136.708592 54.682413 164.048263 32.810267-169.514765 202.328102-300.755832 382.78201-300.755832l0 160.538323c0 5.469572-0.460488 25.329898 10.044774 31.383778 16.101723 9.278317 28.231995-0.530073 33.701566-5.999644l270.0239-291.62487c10.93505-10.939143 14.326287-22.706141 14.326287-31.006178 0-12.707416-9.071609-25.953092-14.541181-31.422663L621.110023 141.28277z" p-id="14877" fill="#ffffff"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/img/icon/star-white.png
Normal file
|
After Width: | Height: | Size: 7.2 KiB |
@ -8,7 +8,7 @@
|
|||||||
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
<img class="love" src="../assets/img/icon/love.svg" alt="">
|
||||||
<span>{{ $likeNum(i.digg_count) }}</span>
|
<span>{{ $likeNum(i.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="date">
|
<div class="date" v-if="mode === 'date'">
|
||||||
<div class="day">{{ getDay(i.create_time) }}</div>
|
<div class="day">{{ getDay(i.create_time) }}</div>
|
||||||
<div class="month">{{ getMonth(i.create_time) }}</div>
|
<div class="month">{{ getMonth(i.create_time) }}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -29,7 +29,7 @@ export default {
|
|||||||
},
|
},
|
||||||
mode: {
|
mode: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'normal'
|
default: 'normal'//date,none
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
43
src/components/Scroll.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="scroll-wrapper" ref="wrapper" @scroll="scroll">
|
||||||
|
<div class="scroll-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Scroll",
|
||||||
|
props: {
|
||||||
|
fixedHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async scroll() {
|
||||||
|
let wrapper = this.$refs.wrapper
|
||||||
|
if (this.fixedHeight !== -1) {
|
||||||
|
this.$emit('fixed', this.fixedHeight < wrapper.scrollTop)
|
||||||
|
}
|
||||||
|
if (wrapper.scrollHeight - wrapper.clientHeight < wrapper.scrollTop + 60) {
|
||||||
|
this.$emit('pulldown')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import "../assets/scss/index";
|
||||||
|
|
||||||
|
.scroll-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -27,11 +27,7 @@
|
|||||||
<div class="love mb2r" @click.stop="loved($event)">
|
<div class="love mb2r" @click.stop="loved($event)">
|
||||||
<div>
|
<div>
|
||||||
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
||||||
<img src="../assets/img/icon/loved.svg" class="love-image" v-else>
|
<img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
|
||||||
<!-- <transition name="love">-->
|
|
||||||
<!-- </transition>-->
|
|
||||||
<!-- <transition name="loved">-->
|
|
||||||
<!-- </transition>-->
|
|
||||||
</div>
|
</div>
|
||||||
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
<span>{{ $likeNum(lVideo.digg_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -41,11 +37,11 @@
|
|||||||
<span>{{ $likeNum(lVideo.comment_count) }}</span>
|
<span>{{ $likeNum(lVideo.comment_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
|
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
<span>{{ $likeNum(lVideo.share_count) }}</span>
|
<span>{{ $likeNum(lVideo.share_count) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
<div v-else class="share mb4r" @click.stop="$emit('showShare')">
|
||||||
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
|
<img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
|
||||||
</div>
|
</div>
|
||||||
<BaseMusic
|
<BaseMusic
|
||||||
:cover="lVideo.music.cover"
|
:cover="lVideo.music.cover"
|
||||||
@ -364,19 +360,6 @@ export default {
|
|||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-status-enter-active,
|
|
||||||
.comment-status-leave-active {
|
|
||||||
transition: transform 0.5s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-status-move {
|
|
||||||
transition: transform 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-status-enter-from,
|
|
||||||
.comment-status-leave-to {
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-wrapper {
|
.video-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
export default {
|
export default {
|
||||||
// baseUrl: 'http://192.168.0.103/index.php/v1',
|
baseUrl: 'http://192.168.0.105/index.php/v1',
|
||||||
// filePreview:'http://192.168.0.103/static/uploads/',
|
filePreview:'http://192.168.0.105/static/uploads/',
|
||||||
baseUrl: 'http://192.168.10.164/index.php/v1',
|
// baseUrl: 'http://192.168.10.164/index.php/v1',
|
||||||
filePreview:'http://192.168.10.164/static/uploads/'
|
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||||
// baseUrl: 'http://localhost/index.php/v1',
|
// baseUrl: 'http://localhost/index.php/v1',
|
||||||
// filePreview:'http://localhost/static/uploads/'
|
// filePreview:'http://localhost/static/uploads/'
|
||||||
}
|
}
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="Test">
|
<div class="Test">
|
||||||
<Video1
|
<Video1
|
||||||
:play="true"
|
:is-play="false"
|
||||||
:video="item"
|
:video="item"
|
||||||
:index="0"
|
:index="0"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -132,7 +132,7 @@
|
|||||||
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
|
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
|
||||||
<span>只有你能看到设为私密的作品和日常</span>
|
<span>只有你能看到设为私密的作品和日常</span>
|
||||||
</div>
|
</div>
|
||||||
<Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
|
<Posters v-if="videos.private.total !== -1" mode="date" :list="videos.private.list"></Posters>
|
||||||
<Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
|
<Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
|
||||||
<no-more v-else/>
|
<no-more v-else/>
|
||||||
</SlideItem>
|
</SlideItem>
|
||||||
|
|||||||