MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save

Browse Source
This commit is contained in:
zyronon 2024-03-06 02:44:22 +08:00
parent 7c62777323
commit b667211da7
17 changed files with 45 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/slide/Indicator.vue
View File

@ -77,7 +77,7 @@ export default {
methods: {
changeIndex(index) {
this.currentSlideItemIndex = index
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
},

2
src/components/slide/IndicatorLight.vue
View File

@ -76,7 +76,7 @@ export default {
methods: {
changeIndex(index) {
this.currentSlideItemIndex = index
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
},

199
src/components/slide/SlideColumnList.vue
View File

@ -1,199 +0,0 @@
<template>
<div id="base-slide-wrapper">
<div id="base-slide-list" ref="slideList"
:style="{'flex-direction':'column'}"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)">
<slot></slot>
</div>
</div>
</template>
<script>
import {nextTick} from "vue";
export default {
name: "BaseSlideList",
props: {
activeIndex: {
type: Number,
default: () => 0
},
//改变index，是否使用动画
changeActiveIndexUseAnim: {
type: Boolean,
default: true
},
canMove: {
type: Boolean,
default: true
},
},
data() {
return {
wrapperHeight: 0,
startLocationX: 0,
startLocationY: 0,
moveXDistance: 0,
moveYDistance: 0,
judgeValue: 10,
startTime: 0,
currentSlideItemIndex: 0,
isDrawDown: true,
isCanDownWiping: false,
isNeedCheck: true,
slideList: null,
slideItems: null,
slideItemsHeights: [],
}
},
watch: {
activeIndex(newVal) {
this.changeIndex()
},
},
computed: {},
mounted: async function () {
await this.checkChildren()
},
methods: {
async changeIndex() {
await this.checkChildren()
this.currentSlideItemIndex = this.activeIndex
if (this.changeActiveIndexUseAnim) {
this.$setCss(this.slideList, 'transition-duration', `300ms`)
}
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
checkChildren() {
return new Promise(resolve => {
nextTick(() => {
this.slideList = this.$refs.slideList
this.slideItems = this.slideList.children
this.wrapperHeight = this.$getCss(this.slideList, 'height')
this.slideItemsHeights = []
for (let i = 0; i < this.slideItems.length; i++) {
let el = this.slideItems[i]
this.slideItemsHeights.push(this.$getCss(el, 'height'))
}
resolve()
})
})
},
touchStart(e) {
this.checkChildren()
this.$setCss(this.slideList, 'transition-duration', `0ms`)
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.startLocationX = e.touches[0].pageX
this.startLocationY = e.touches[0].pageY
this.startTime = Date.now()
},
touchMove(e) {
if (!this.canMove) return;
this.moveXDistance = e.touches[0].pageX - this.startLocationX
this.moveYDistance = e.touches[0].pageY - this.startLocationY
this.isDrawDown = this.moveYDistance < 0
this.checkDirection()
if (this.isCanDownWiping) {
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
// console.log('this.isCanDownWiping')
this.$stopPropagation(e)
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) +
this.moveYDistance +
(this.isDrawDown ? this.judgeValue : -this.judgeValue)
}px, 0px)`)
}
},
touchEnd(e) {
if (!this.canMove) return;
if (this.isCanDownWiping) {
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return this.$attrs['onEnd'] && this.$emit('end')
this.$stopPropagation(e)
this.$setCss(this.slideList, 'transition-duration', `300ms`)
let endTime = Date.now()
let gapTime = endTime - this.startTime
if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
if (gapTime < 150) {
if (this.isDrawDown) {
this.currentSlideItemIndex += 1
} else {
this.currentSlideItemIndex -= 1
}
}
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px, 0px)`)
}
this.resetConfig()
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
resetConfig() {
this.isCanDownWiping = false
this.isNeedCheck = true
this.moveXDistance = 0
this.moveYDistance = 0
},
getHeight(index) {
return this.slideItemsHeights.reduce((p, c, i) => {
if (i < index) {
if (this.slideItemsHeights.length - 1 === i + 1) {
p = p + c - (this.wrapperHeight - this.slideItemsHeights[index])
} else {
p += c
}
}
return p
}, 0)
},
checkDirection() {
if (!this.isNeedCheck) return
if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
if (angle > 1) {
this.isCanDownWiping = false
this.isCanRightWiping = true
// console.log('横划')
} else {
this.isCanDownWiping = true
this.isCanRightWiping = false
// console.log('竖划')
}
// console.log(angle)
return this.isNeedCheck = false
}
return this.isNeedCheck = true
}
}
}
</script>
<style scoped lang="less">
@import "../../assets/less/index";
#base-slide-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
#base-slide-list {
display: flex;
height: 100%;
width: 100%;
position: relative;
}
}
</style>

4
src/components/slide/SlideList.vue
View File

@ -183,7 +183,7 @@ export default {
} else {
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
}
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
initTabs() {
@ -357,7 +357,7 @@ export default {
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px, 0px)`)
}
this.resetConfig()
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
resetConfig() {
this.isCanDownWiping = false

104
src/components/slide/SlideRowList.vue
View File

@ -1,31 +1,5 @@
<template>
<div id="base-slide-wrapper" ref="slideWrapper">
<div class="indicator-home" v-if="indicatorType === 'home'">
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
<div class="toolbar" ref="toolbar" :style="toolbarStyle">
<div class="left" @click="$nav('/home/live')">直播</div>
<div class="tab-ctn">
<div class="tabs" ref="tabs">
<div class="tab"
:class="currentSlideItemIndex === 0?'active':''"
@click="changeIndex(false,0)">
<span>关注</span>
</div>
<div class="tab"
:class="currentSlideItemIndex === 1?'active':''"
@click="changeIndex(false,1)"><span>推荐</span>
</div>
</div>
<div class="indicator" ref="indicator"></div>
</div>
<img src="../../assets/img/icon/search-gray.png" alt=""
:style="{opacity:loading ? 0 : 1}"
@click="$nav('/home/search')"
style="margin-top: 5rem;">
</div>
<Loading class="loading" style="width: 40rem;" :style="loadingStyle" :is-full-screen="false"/>
</div>
<div class="indicator-bullets" v-if="indicatorType === 'bullets' && slideItems.length">
<div class="bullet" :class="{active:currentSlideItemIndex === item-1}" v-for="item in slideItems.length"></div>
</div>
@ -177,7 +151,7 @@ export default {
if (this.isHome) {
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
}
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
initTabs() {
let tabs = this.$refs.tabs
@ -293,7 +267,7 @@ export default {
}
}
this.resetConfig()
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onEnd'] && this.$emit('end')
bus.emit(this.name + '-end', this.currentSlideItemIndex)
},
@ -360,80 +334,6 @@ export default {
position: relative;
}
.indicator-home {
position: fixed;
font-size: 16rem;
top: 0;
left: 0;
height: 60px;
z-index: 2;
width: 100%;
color: white;
.notice {
opacity: 0;
top: 0;
position: absolute;
width: 100vw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loading {
opacity: 0;
top: 13rem;
right: 15rem;
position: absolute;
}
.toolbar {
z-index: 2;
position: relative;
color: white;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 15rem;
display: flex;
justify-content: space-between;
align-items: center;
.tab-ctn {
width: 30%;
position: relative;
.tabs {
display: flex;
justify-content: space-between;
font-weight: bold;
.tab {
transition: color .3s;
color: gray;
&.active {
color: white;
}
}
}
.indicator {
//transition: left .3s;
position: absolute;
bottom: -8rem;
height: 3rem;
width: 20rem;
background: #fff;
border-radius: 5rem;
}
}
}
}
.indicator-bullets {
position: absolute;
bottom: 10rem;

2
src/components/slide/UNUSE_SlideColumnVirtualList.txt
View File

@ -271,7 +271,7 @@ export default {
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px, 0px)`)
}
this.resetConfig()
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onUpdate:activeIndex'] && this.$emit('update:active-index', this.currentSlideItemIndex)
},
resetConfig() {
this.isCanDownWiping = false

6
src/pages/home/MusicRankList.vue
View File

@ -21,9 +21,9 @@
:tabTexts="['热歌榜','飙升樘','原创榜']"
v-model:active-index="contentIndex">
</Indicator>
<SlideRowList
<SlideHorizontal
name="musicRankList"
v-model:active-index="contentIndex">
v-model:index="contentIndex">
<SlideItem>
<div class="list">
<div class="item" v-for="(item,index) in hotList" @click="togglePlay(item,hotList)">
@ -168,7 +168,7 @@
</div>
</div>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
</div>
</div>
</template>

18
src/pages/home/Publish.vue
View File

@ -2,22 +2,24 @@
<div class="Publish">
<video id="video" autoplay="autoplay" style="width: 100%;height:calc(100% - 60rem);"></video>
<div class="footer">
<SlideRowList v-model:active-index="activeIndex">
<SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
<SlideItem style="min-width: 20vw;min-height: 60rem;"></SlideItem>
<SlideItem style="min-width: 25vw;min-height: 60rem;" @click="activeIndex = 0">
<SlideHorizontal
style="height: 60rem;"
v-model:index="activeIndex">
<SlideItem style="width: 20vw"></SlideItem>
<SlideItem style="width: 20vw"></SlideItem>
<SlideItem style="width: 25vw" @click="activeIndex = 0">
<span :class="activeIndex + 2 === 2?'active':''">分段拍</span>
</SlideItem>
<SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 1">
<SlideItem style="width: 20vw" @click="activeIndex = 1">
<span :class="activeIndex + 2 === 3?'active':''">快拍</span>
</SlideItem>
<SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 2">
<SlideItem style="width: 20vw" @click="activeIndex = 2">
<span :class="activeIndex + 2 === 4?'active':''">影集</span>
</SlideItem>
<SlideItem style="min-width: 20vw;min-height: 60rem;" @click="activeIndex = 3">
<SlideItem style="width: 20vw" @click="activeIndex = 3">
<span :class="activeIndex + 2 === 5?'active':''">开直播</span>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
</div>
<div class="float">
<img class="close" src="../../assets/img/icon/close-white.png" alt="" @click="$back">

4
src/pages/home/SearchPage.vue
View File

@ -46,7 +46,7 @@
<div class="tab" :class="{active:slideIndex === 3}" @click="slideIndex = 3">品牌榜</div>
</div>
<!-- TODO 滚动到下面的时候，应该禁止slide-move，因为第个slideitem的高度不一样，高的切到矮的，会闪屏-->
<SlideRowList v-model:active-index="slideIndex" :style="slideListHeight">
<SlideHorizontal v-model:index="slideIndex" :style="slideListHeight">
<SlideItem>
<div class="slide0" ref="slide0">
<div class="l-row">
@ -191,7 +191,7 @@
</SlideRowList>
</div>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
</div>
</div>
</div>

2
src/pages/me/Me.less
View File

@ -457,7 +457,7 @@
box-sizing: border-box;
background: @main-bg;
width: 100%;
padding: 10rem 20rem;
padding: 10rem 26rem;
list-style: none;
display: flex;
align-items: center;

10
src/pages/me/Me.vue
View File

@ -2,7 +2,8 @@
<div class="Me">
<SlideRowList
name="baseSlide"
style="width: 100vw;" v-model:active-index="baseActiveIndex">
style="width: 100vw;"
v-model:active-index="baseActiveIndex">
<SlideItem>
<div ref="float" class="float" :class="floatFixed?'fixed':''">
<div
@ -14,7 +15,7 @@
</div>
<transition name="fade">
<div class="center" v-if="floatShowName">
<p class="name f20 mt1r mb1r">{{ userinfo.nickname }}</p>
<p class="name f15 mt1r mb1r">{{ userinfo.nickname }}</p>
</div>
</transition>
<div class="right">
@ -224,7 +225,7 @@
<div class="mask" v-if="baseActiveIndex === 1" @click="baseActiveIndex = 0"></div>
</transition>
</SlideItem>
<SlideItem style="min-width: 70vw; overflow:auto;">
<SlideItem style="width: 70vw; overflow:auto;">
<transition name="fade1">
<div class="ul" v-if="!isMoreFunction">
<div class="li" @click="$no">
@ -359,10 +360,11 @@ import {mapState} from "vuex";
import bus from "../../utils/bus";
import ConfirmDialog from "../../components/dialog/ConfirmDialog";
import {$no} from "@/utils";
import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
export default {
name: "Me",
components: {Posters, Footer, Indicator, ConfirmDialog},
components: {Posters, Footer, Indicator, ConfirmDialog, SlideHorizontal},
data() {
return {
previewImg: '',

4
src/pages/me/MyMusic.vue
View File

@ -9,7 +9,7 @@
</IndicatorLight>
<dy-back style="opacity: 0;" mode="light" img="back"/>
</div>
<SlideRowList name="myMusicList" v-model:active-index="slideIndex">
<SlideHorizontal name="myMusicList" v-model:index="slideIndex">
<SlideItem>
<GuessMusic :list="guessMusic"/>
</SlideItem>
@ -98,7 +98,7 @@
</transition>
</div>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
<transition name="my-collect-dialog">
<div class="my-collect-dialog" v-show="isShowCollectDialog">
<div class="dialog-header">

10
src/pages/me/components/CollectMusic.vue
View File

@ -1,8 +1,8 @@
<template>
<div id="CollectMusic">
<SlideColumnList
<SlideVertical
:changeActiveIndexUseAnim="false"
v-model:active-index="activeIndex"
v-model:index="activeIndex"
:canMove="slideCanMove">
<SlideItemMusic
:ref="setItemRef"
@ -14,7 +14,7 @@
v-model="list[index]"
v-model:isLoop="isLoop"
v-for="(item,index) in list "/>
</SlideColumnList>
</SlideVertical>
<from-bottom-dialog
mask-mode="lightgray"
page-id="CollectMusic"
@ -63,18 +63,18 @@ import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
import Switches from "../../message/components/swtich/switches";
import SlideItemMusic from "./SlideItemMusic";
import IndicatorLight from "../../../components/slide/IndicatorLight";
import SlideColumnList from "../../../components/slide/SlideColumnList";
import Share from "../../../components/Share";
import ShareToFriend from "../../home/components/ShareToFriend";
import SlideVertical from "@/components/slide/SlideVertical.vue";
export default {
name: "GuessMusic",
components: {
SlideVertical,
FromBottomDialog,
Switches,
SlideItemMusic,
IndicatorLight,
SlideColumnList,
Share,
ShareToFriend
},

5
src/pages/me/rightMenu/LookHistory.vue
View File

@ -15,7 +15,8 @@
:tabTexts="['视频','影视综']"
v-model:active-index="currentSlideItemIndex">
</Indicator>
<SlideRowList v-model:active-index="currentSlideItemIndex" class="SlideRowList">
<SlideHorizontal
v-model:index="currentSlideItemIndex" class="SlideRowList">
<SlideItem class="tab1" style="overflow:auto;">
<Scroll class="Scroll"
@pulldown="getHistoryVideo">
@ -36,7 +37,7 @@
<div class="title">暂无观影历史记录</div>
</div>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
</div>
</div>
</template>

4
src/pages/people/FindAcquaintance.vue
View File

@ -10,7 +10,7 @@
</Indicator>
<img src="../../assets/img/icon/menu-gray.png" alt="" class="option" @click="moreOptionDialog = true">
</div>
<SlideRowList v-model:active-index="currentSlideItemIndex">
<SlideHorizontal v-model:index="currentSlideItemIndex">
<SlideItem class="tab1" style="overflow: auto;">
<div class="mr2r ml2r mt1r">
<Search v-if="!isShowRightText"
@ -55,7 +55,7 @@
<People v-for="item in friends.all " :people="item" mode="friend"></People>
<NoMore class="mb5r"/>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
<transition name="fade">
<Mask v-if="maskDialog" @click="maskDialog = false"></Mask>

4
src/pages/people/FollowAndFans.vue
View File

@ -19,7 +19,7 @@
v-model:active-index="slideIndex">
</Indicator>
</div>
<SlideRowList v-model:active-index="slideIndex" style="height: calc(100vh - 111rem)">
<SlideHorizontal v-model:index="slideIndex" style="height: calc(100vh - 111rem)">
<SlideItem class="tab1">
<Search v-model="searchKey" placeholder="搜索用户备注或名字" :is-show-right-text="false"/>
<div class="is-search" v-if="searchKey">
@ -42,7 +42,7 @@
<People v-for="item in friends.all" :people="item"></People>
<NoMore/>
</SlideItem>
</SlideRowList>
</SlideHorizontal>
</div>
</div>
</template>

4
src/utils/mixin.js
View File

@ -2,7 +2,6 @@ import globalMethods from "./index";
import BaseHeader from "../components/BaseHeader";
import SlideList from "../components/slide/SlideList";
import SlideRowList from "../components/slide/SlideRowList";
import SlideColumnList from "../components/slide/SlideColumnList";
import SlideItem from "../components/slide/SlideItem";
import Indicator from "../components/slide/Indicator";
import Video from "../components/Video";
@ -17,13 +16,14 @@ import Dom from "./dom";
import bus, {EVENT_KEY} from "./bus";
import {random} from "lodash";
import {Icon} from '@iconify/vue'
import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
export default {
components: {
BaseHeader,
SlideHorizontal,
SlideList,
SlideRowList,
SlideColumnList,
SlideItem,
Indicator,
'Video1': Video,