pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化滑动组件

pull/19/head
zyronon 4 years ago
parent
e147895d32
commit
035a4710dc
7 changed files with 216 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/App.vue
  2. 2
      src/components/slide/SlideColumnList.vue
  3. 49
      src/components/slide/SlideRowList.vue
  4. 189
      src/pages/Test5.vue
  5. 3
      src/pages/home/Index2.vue
  6. 27
      src/pages/home/LivePage.vue
  7. 2
      src/router/index.js

1
src/App.vue
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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},

Write Preview
Loading…
Cancel
Save