加上me页面indicator
This commit is contained in:
zyronon
parent
d68d704b52
commit
ebb57554ff
@ -2,111 +2,115 @@
|
||||
<div class="Me">
|
||||
<SlideList key1="父" style="width: 100vw;">
|
||||
<SlideItem style="overflow:auto;">
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<SlideList style="width: 100vw;" :active-index="contentIndex">
|
||||
<SlideItem>
|
||||
1
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
2
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div class="content">
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
4
|
||||
</SlideItem>
|
||||
</SlideList>
|
||||
<div ref="desc">
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
</div>
|
||||
<div ref="content">
|
||||
<SlideList
|
||||
:show-indicator="true"
|
||||
indicator-type="me"
|
||||
v-model:active-index="contentIndex">
|
||||
<SlideItem>
|
||||
<div ref="tab-content1">1</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div ref="tab-content2">2</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div class="content" ref="tab-content3">
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
</div>
|
||||
</SlideItem>
|
||||
</SlideList>
|
||||
</div>
|
||||
</SlideItem>
|
||||
<SlideItem style="min-width: 60vw;line-height: 50px; overflow:auto;">
|
||||
<p>设置页</p>
|
||||
@ -143,9 +147,55 @@ export default {
|
||||
return {
|
||||
serviceEl: {},
|
||||
serviceHeight: 0,
|
||||
contentIndex:0
|
||||
contentIndex: 0,
|
||||
desc: null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
contentIndex(){
|
||||
this.changeIndex()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bodyHeight() {
|
||||
return this.$store.state.bodyHeight
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.changeIndex()
|
||||
},
|
||||
methods:{
|
||||
changeIndex(){
|
||||
let desc = this.$refs.desc
|
||||
let content = this.$refs['content']
|
||||
let tabContent1 = this.$refs['tab-content1']
|
||||
let tabContent2 = this.$refs['tab-content2']
|
||||
let tabContent3 = this.$refs['tab-content3']
|
||||
switch (this.contentIndex) {
|
||||
case 0:
|
||||
if (this.bodyHeight - desc.clientHeight > tabContent1.clientHeight) {
|
||||
content.style.height = this.bodyHeight - desc.clientHeight + 'px'
|
||||
} else {
|
||||
content.style.height = tabContent1.clientHeight + 'px'
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
if (this.bodyHeight - desc.clientHeight > tabContent2.clientHeight) {
|
||||
content.style.height = this.bodyHeight - desc.clientHeight + 'px'
|
||||
}else {
|
||||
content.style.height = tabContent2.clientHeight + 'px'
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
if (this.bodyHeight - desc.clientHeight > tabContent3.clientHeight) {
|
||||
content.style.height = this.bodyHeight - desc.clientHeight + 'px'
|
||||
}else {
|
||||
content.style.height = tabContent3.clientHeight + 'px'
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="base-slide-wrapper" ref="slideWrapper">
|
||||
<div class="toolbar-ctn" v-if="showIndicator">
|
||||
<div class="indicator-home" v-if="showIndicator && indicatorType === 'home'">
|
||||
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
|
||||
<div class="toolbar" ref="toolbar" :style="toolbarStyle">
|
||||
<div class="left">直播</div>
|
||||
@ -20,6 +20,25 @@
|
||||
</div>
|
||||
<div class="loading" :style="loadingStyle">AA</div>
|
||||
</div>
|
||||
<div class="indicator-me" v-if="showIndicator && indicatorType === 'me'">
|
||||
<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.stop="changeIndex(false,1)">
|
||||
<span>推荐</span>
|
||||
</div>
|
||||
<div class="tab"
|
||||
:class="currentSlideItemIndex === 2?'active':''"
|
||||
@click="changeIndex(false,2)">
|
||||
<span>推荐</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator" ref="indicator"></div>
|
||||
</div>
|
||||
<div id="base-slide-list" ref="slideList"
|
||||
:style="{'flex-direction':direction}"
|
||||
@touchstart="touchStart($event)"
|
||||
@ -42,6 +61,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
indicatorType: {
|
||||
type: String,
|
||||
default: () => 'home'
|
||||
},
|
||||
useHomeLoading: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
@ -139,6 +162,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
changeIndex(init = false, index = null) {
|
||||
console.log(111)
|
||||
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
|
||||
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
if (this.direction === 'row') {
|
||||
@ -157,7 +181,7 @@ export default {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + this.tabWidth * 0.15)
|
||||
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0))
|
||||
}
|
||||
this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
if (this.showIndicator) {
|
||||
@ -255,6 +279,9 @@ export default {
|
||||
if (this.direction === 'row') {
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
|
||||
// console.log('row-end')
|
||||
this.$stopPropagation(e)//todo 如果是嵌套竖状的slide，会出问题,会到moveYDistance停下，不会移到
|
||||
//this.getWidth(this.currentSlideItemIndex)位置，但是不禁示冒泡的话，又会出现划动过快，把父级也会移动。
|
||||
if (Math.abs(this.moveXDistance) < 20) gapTime = 1000
|
||||
if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) gapTime = 100
|
||||
if (gapTime < 150) {
|
||||
@ -276,6 +303,9 @@ export default {
|
||||
} else {
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
|
||||
}
|
||||
console.log('column-end')
|
||||
|
||||
// this.$stopPropagation(e)
|
||||
if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
|
||||
if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
|
||||
if (gapTime < 150) {
|
||||
@ -362,7 +392,7 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-ctn {
|
||||
.indicator-home {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
top: 0;
|
||||
@ -414,6 +444,7 @@ export default {
|
||||
.tab {
|
||||
transition: color .3s;
|
||||
color: gray;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
@ -434,6 +465,42 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-me {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #333;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
.tab {
|
||||
height: 40px;
|
||||
width: 33%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
transition: color .3s;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
height: 2px;
|
||||
background: gold;
|
||||
width: 33%;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user