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

优化滑动组件

Browse Source
This commit is contained in:
zyronon 2021-09-25 01:52:41 +08:00
parent e147895d32
commit 035a4710dc
7 changed files with 216 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -56,6 +56,7 @@ export default {
'/home/music', '/home/music',
'/home/music-rank-list', '/home/music-rank-list',
'/home/report', '/home/report',
'/home/search',
'/message/share-to-friend', '/message/share-to-friend',

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

@ -147,7 +147,7 @@ export default {
} }
}, },
touchStart(e) { touchStart(e) {
console.log('this.slideItemsHeights',this.slideItemsHeights) // console.log('this.slideItemsHeights',this.slideItemsHeights)
this.$setCss(this.slideList, 'transition-duration', `0ms`) this.$setCss(this.slideList, 'transition-duration', `0ms`)
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)

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

@ -1,6 +1,6 @@
<template> <template>
<div id="base-slide-wrapper" ref="slideWrapper"> <div id="base-slide-wrapper" ref="slideWrapper">
<div class="indicator-home" v-if="showIndicator"> <div class="indicator-home" v-if="indicatorType === 'home'">
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div> <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
<div class="toolbar" ref="toolbar" :style="toolbarStyle"> <div class="toolbar" ref="toolbar" :style="toolbarStyle">
<div class="left" @click="$nav('/home/live')">直播</div> <div class="left" @click="$nav('/home/live')">直播</div>
@ -9,10 +9,12 @@
<div class="tab" <div class="tab"
:class="currentSlideItemIndex === 0?'active':''" :class="currentSlideItemIndex === 0?'active':''"
@click="changeIndex(false,0)"> @click="changeIndex(false,0)">
<span>关注</span></div> <span>关注</span>
</div>
<div class="tab" <div class="tab"
:class="currentSlideItemIndex === 1?'active':''" :class="currentSlideItemIndex === 1?'active':''"
@click="changeIndex(false,1)"><span>推荐</span></div> @click="changeIndex(false,1)"><span>推荐</span>
</div>
</div> </div>
<div class="indicator" ref="indicator"></div> <div class="indicator" ref="indicator"></div>
</div> </div>
@ -29,7 +31,7 @@
</div> </div>
<div id="base-slide-list" ref="slideList" <div id="base-slide-list" ref="slideList"
:style="{'flex-direction':'row',marginTop:indicatorFixed?'5rem':'0'}" :style="{'flex-direction':'row'}"
@touchstart="touchStart($event)" @touchstart="touchStart($event)"
@touchmove="touchMove($event)" @touchmove="touchMove($event)"
@touchend="touchEnd($event)"> @touchend="touchEnd($event)">
@ -64,14 +66,6 @@ export default {
//progressbar //progressbar
//custom //custom
}, },
showIndicator: {
type: Boolean,
default: () => false
},
indicatorFixed: {
type: Boolean,
default: () => false
},
useHomeLoading: { useHomeLoading: {
type: Boolean, type: Boolean,
default: () => false default: () => false
@ -86,8 +80,11 @@ export default {
}, },
}, },
computed: { computed: {
isHome() {
return this.indicatorType === 'home'
},
toolbarStyle() { toolbarStyle() {
if (!this.useHomeLoading) return if (!this.isHome) return
return { return {
opacity: 1 - this.homeLoadingMoveYDistance / 20, opacity: 1 - this.homeLoadingMoveYDistance / 20,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms', 'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
@ -95,7 +92,7 @@ export default {
} }
}, },
noticeStyle() { noticeStyle() {
if (!this.useHomeLoading) return if (!this.isHome) return
return { return {
opacity: this.homeLoadingMoveYDistance / 60, opacity: this.homeLoadingMoveYDistance / 60,
'transition-duration': this.toolbarStyleTransitionDuration + 'ms', 'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
@ -103,7 +100,7 @@ export default {
} }
}, },
loadingStyle() { loadingStyle() {
if (!this.useHomeLoading) return if (!this.isHome) return
if (this.loading) { if (this.loading) {
return { return {
opacity: 1, opacity: 1,
@ -158,7 +155,7 @@ export default {
}, },
mounted: async function () { mounted: async function () {
await this.checkChildren(true) await this.checkChildren(true)
this.showIndicator && this.initTabs() this.isHome && this.initTabs()
this.changeIndex(true) this.changeIndex(true)
if (this.autoplay) { if (this.autoplay) {
@ -177,7 +174,7 @@ export default {
this.currentSlideItemIndex = index !== null ? index : this.activeIndex this.currentSlideItemIndex = index !== null ? index : this.activeIndex
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`) !init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`) this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
if (this.showIndicator) { if (this.isHome) {
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') 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:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
@ -189,10 +186,11 @@ export default {
let item = tabs.children[i] let item = tabs.children[i]
this.tabWidth = this.$getCss(item, 'width') this.tabWidth = this.$getCss(item, 'width')
this.tabIndicatorRelationActiveIndexLefts.push( this.tabIndicatorRelationActiveIndexLefts.push(
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0)) item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.isHome ? this.tabWidth * 0.15 : 0))
} }
console.log(this.tabIndicatorRelationActiveIndexLefts)
this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0] this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
if (this.showIndicator) { if (this.isHome) {
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
} }
@ -209,7 +207,7 @@ export default {
}, },
touchStart(e) { touchStart(e) {
this.$setCss(this.slideList, 'transition-duration', `0ms`) this.$setCss(this.slideList, 'transition-duration', `0ms`)
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
this.toolbarStyleTransitionDuration = 0 this.toolbarStyleTransitionDuration = 0
this.startLocationX = e.touches[0].pageX this.startLocationX = e.touches[0].pageX
@ -230,7 +228,7 @@ export default {
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移， //多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance //slideitem同时在左右移的情况，所以不能直接使用moveYDistance
if (this.isCanDownWiping && this.useHomeLoading && !this.loading) { if (this.isCanDownWiping && this.isHome && !this.loading) {
this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0 this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0
} }
@ -250,13 +248,13 @@ export default {
this.moveXDistance + this.moveXDistance +
(this.isDrawRight ? this.judgeValue : -this.judgeValue)}px, 0px, 0px)`) (this.isDrawRight ? this.judgeValue : -this.judgeValue)}px, 0px, 0px)`)
this.showIndicator && this.$setCss(this.indicatorRef, 'left', this.isHome && this.$setCss(this.indicatorRef, 'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] - this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
this.moveXDistance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px') this.moveXDistance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
} }
}, },
touchEnd(e) { touchEnd(e) {
if (this.useHomeLoading) { if (this.isHome) {
if (this.homeLoadingMoveYDistance > 60) { if (this.homeLoadingMoveYDistance > 60) {
this.getData() this.getData()
} }
@ -269,7 +267,7 @@ export default {
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
this.$setCss(this.slideList, 'transition-duration', `300ms`) this.$setCss(this.slideList, 'transition-duration', `300ms`)
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) this.isHome && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
let endTime = Date.now() let endTime = Date.now()
let gapTime = endTime - this.startTime let gapTime = endTime - this.startTime
@ -289,7 +287,7 @@ export default {
} }
} }
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`) this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`)
if (this.showIndicator) { if (this.isHome) {
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px') this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
} }
} }
@ -391,6 +389,7 @@ export default {
} }
.toolbar { .toolbar {
z-index: 2;
position: relative; position: relative;
color: white; color: white;
width: 100%; width: 100%;

189
src/pages/Test5.vue
View File

@ -1,10 +1,173 @@
<template> <template>
<div class="Test"> <div class="Test">
<div class="content1"> <SlideRowList
<BaseMarquee :is-play="true" :text="text" style="width: 150px;"/> style="height: calc(100% - 5rem);"
<BaseButton @click="triggerPause">pause</BaseButton> v-model:active-index="activeIndex"
<BaseButton @click="triggerStart">start</BaseButton> indicatorType="home"
</div> >
<SlideItem>
<SlideColumnList>
<SlideItem style="background: tan">
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
</SlideItem>
<SlideItem style="background: red;">
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
</SlideItem>
<SlideItem style="background: yellow">
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
</SlideItem>
</SlideColumnList>
</SlideItem>
<SlideItem>
<SlideColumnList>
<SlideItem style="background: tan">
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
<p>111111111111</p>
</SlideItem>
<SlideItem style="background: red;">
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
<p>222222222222</p>
</SlideItem>
<SlideItem style="background: yellow">
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
<p>3333333333333</p>
</SlideItem>
</SlideColumnList>
</SlideItem>
</SlideRowList>
</div> </div>
</template> </template>
<script> <script>
@ -24,19 +187,14 @@ export default {
}, },
data() { data() {
return { return {
timer: null, activeIndex: 0,
contentWidth: 0, showIndicator: true,
transformX: 0,
$marqueeContent: null,
} }
}, },
methods: { methods: {
triggerPause() { changeIndex() {
new Dom('.text').trigger('pause')
}, }
triggerStart() {
new Dom('.text').trigger('start')
},
}, },
mounted() { mounted() {
} }
@ -54,7 +212,6 @@ export default {
top: 0; top: 0;
overflow: auto; overflow: auto;
font-size: 1.4rem; font-size: 1.4rem;
color: white;
.content1 { .content1 {
padding-top: 6rem; padding-top: 6rem;

3
src/pages/home/Index2.vue
View File

@ -8,8 +8,7 @@
<SlideRowList <SlideRowList
style="height: calc(100% - 5rem);" style="height: calc(100% - 5rem);"
v-model:active-index="activeIndex" v-model:active-index="activeIndex"
:showIndicator="true" indicatorType="home"
:useHomeLoading="true"
> >
<SlideItem> <SlideItem>
<SlideColumnList> <SlideColumnList>

27
src/pages/home/LivePage.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="LivePage" ref="page"> <div class="LivePage" ref="page">
<div class="live-wrapper"> <div class="live-wrapper">
<img src="../../assets/img/poster/11.jpg" alt=""> <img src="../../assets/img/poster/1.jpg" alt="">
</div> </div>
<div class="float"> <div class="float">
<div class="top"> <div class="top">
@ -33,7 +33,7 @@
<img src="../../assets/img/icon/avatar/2.png" alt="" class="round"> <img src="../../assets/img/icon/avatar/2.png" alt="" class="round">
<img src="../../assets/img/icon/avatar/3.png" alt="" class="round"> <img src="../../assets/img/icon/avatar/3.png" alt="" class="round">
<div class="round count">107</div> <div class="round count">107</div>
<back class="round close" img="close" mode="light"/> <back class="round close" img="close" mode="light" @click="$back"/>
</div> </div>
<div class="more"> <div class="more">
<div class="wrapper"> <div class="wrapper">
@ -87,7 +87,7 @@
</div> </div>
<!-- <base-button @click="sendGift">点击</base-button>--> <base-button @click="sendComment">点击</base-button>
</div> </div>
</template> </template>
<script> <script>
@ -163,15 +163,15 @@ export default {
}, },
mounted() { mounted() {
this.page = this.$refs.page this.page = this.$refs.page
setInterval(async () => { // setInterval(async () => {
this.sendGift() // this.sendGift()
await this.$sleep(300) // await this.$sleep(300)
this.sendGift() // this.sendGift()
this.joinUser() // this.joinUser()
}, 3000) // }, 3000)
setInterval(async () => { // setInterval(async () => {
this.sendBarrage() // this.sendBarrage()
}, 5100) // }, 5100)
// setInterval(async () => { // setInterval(async () => {
// this.sendComment() // this.sendComment()
// }, 500) // }, 500)
@ -217,7 +217,8 @@ export default {
this.list.push('评论评论评论评论评论评论评论评论评论评论' + this.list.length) this.list.push('评论评论评论评论评论评论评论评论评论评论' + this.list.length)
nextTick(() => { nextTick(() => {
let comments = this.$refs['comments'] let comments = this.$refs['comments']
comments.scrollTop = comments.scrollHeight - comments.clientHeight comments.scrollTo({top: comments.scrollHeight - comments.clientHeight, behavior: 'smooth'})
// comments.scrollTop = comments.scrollHeight - comments.clientHeight
}) })
}, },
attention() { attention() {

2
src/router/index.js
View File

@ -52,6 +52,7 @@ import RequestUpdate from "../pages/me/RequestUpdate";
import Test4 from "../pages/Test4"; import Test4 from "../pages/Test4";
import Search from "../pages/home/SearchPage"; import Search from "../pages/home/SearchPage";
import LivePage from "../pages/home/LivePage"; import LivePage from "../pages/home/LivePage";
import Test5 from "../pages/Test5";
const routes = [ const routes = [
// {path: '', component: Music}, // {path: '', component: Music},
@ -61,6 +62,7 @@ const routes = [
{path: '/test2', component: Test2}, {path: '/test2', component: Test2},
{path: '/test3', component: Test3}, {path: '/test3', component: Test3},
{path: '/test4', component: Test4}, {path: '/test4', component: Test4},
{path: '/test5', component: Test5},
{path: '/home', component: Index}, {path: '/home', component: Index},
{path: '/home/submit-report', component: SubmitReport}, {path: '/home/submit-report', component: SubmitReport},
{path: '/home/music', component: Music}, {path: '/home/music', component: Music},