将indicator放到slide组件里面
This commit is contained in:
zyronon
parent
e82502a61e
commit
d68d704b52
@ -18,6 +18,7 @@ import BaseHeader from "./components/BaseHeader.vue"
|
||||
import MyCollect from "./pages/me/MyCollect.vue";
|
||||
import BaseSlideList from "./components/BaseSlideList.vue";
|
||||
import BaseSlideItem from "./components/BaseSlideItem.vue";
|
||||
import Me2 from "./pages/home/Me2";
|
||||
|
||||
// 我们后面再讨论嵌套路由。
|
||||
const routes = [
|
||||
@ -27,6 +28,7 @@ const routes = [
|
||||
{path: '/attention', component: Attention},
|
||||
{path: '/message', component: Message},
|
||||
{path: '/me', component: Me},
|
||||
{path: '/me2', component: Me2},
|
||||
{path: '/music', component: Music},
|
||||
{path: '/countryChoose', component: countryChoose},
|
||||
{path: '/MyCard', component: MyCard},
|
||||
@ -41,7 +43,9 @@ const store = Vuex.createStore({
|
||||
state: {
|
||||
pageAnim: 'none',
|
||||
playDuration: 60,
|
||||
currentVideoId:null
|
||||
currentVideoId: null,
|
||||
bodyHeight: document.body.clientHeight,
|
||||
bodyWidth: document.body.clientWidth
|
||||
},
|
||||
mutations: {
|
||||
setPageAnim(state, states) {
|
||||
@ -123,7 +127,7 @@ const myMixin = {
|
||||
}
|
||||
}
|
||||
const app = Vue.createApp(App)
|
||||
app.provide('mitt',mitt())
|
||||
app.provide('mitt', mitt())
|
||||
|
||||
app.component('BaseHeader', BaseHeader)
|
||||
app.component('BaseSlideList', BaseSlideList)
|
||||
|
||||
@ -2,66 +2,13 @@
|
||||
<div id="home-index">
|
||||
<SlideList v-model:active-index="baseActiveIndex">
|
||||
<SlideItem>
|
||||
<div class="toolbar-ctn">
|
||||
<div class="toolbar" :style="toolbarStyle">
|
||||
<div class="left">直播</div>
|
||||
<div class="tab-ctn">
|
||||
<div class="tabs" ref="tabs">
|
||||
<div class="tab"><span>双流</span></div>
|
||||
<div class="tab"><span>关注</span></div>
|
||||
<div class="tab"><span>推荐</span></div>
|
||||
</div>
|
||||
<div class="index" :style="tabIndexStyle"></div>
|
||||
</div>
|
||||
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
|
||||
</div>
|
||||
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
|
||||
<div class="loading" :style="loadingStyle">AA</div>
|
||||
</div>
|
||||
<SlideList v-model:active-index="activeIndex"
|
||||
<SlideList
|
||||
v-model:active-index="activeIndex"
|
||||
:showIndicator="true"
|
||||
:useHomeLoading="true"
|
||||
>
|
||||
<SlideItem style="overflow:auto;">
|
||||
<div>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<p>同城页</p>
|
||||
<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>
|
||||
<SlideList direction="column"
|
||||
@end="end"
|
||||
@first="first"
|
||||
>
|
||||
<SlideItem style="background: tan">
|
||||
<p>111111111111</p>
|
||||
@ -143,14 +90,13 @@
|
||||
</SlideList>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<SlideList direction="column"
|
||||
ref="slideList"
|
||||
v-model:active-index="videoActiveIndex"
|
||||
:virtual="true"
|
||||
:total="total"
|
||||
@end="end"
|
||||
@first="first"
|
||||
@slide="slide">
|
||||
<SlideList
|
||||
direction="column"
|
||||
ref="slideList"
|
||||
v-model:active-index="videoActiveIndex"
|
||||
:virtual="true"
|
||||
:total="total"
|
||||
@slide="slide">
|
||||
<SlideItem :style="itemTop" v-for="(item,index) of videos">
|
||||
<Video
|
||||
:disabled="videoActiveIndex !== addCount + index"
|
||||
@ -220,7 +166,7 @@ import Comment from '../../components/Comment.vue'
|
||||
import Other from '../../components/Other.vue'
|
||||
import Share from '../../components/Share.vue'
|
||||
import Footer from "../../components/Footer.vue"
|
||||
import mp41 from '../../assets/video/10.mp4'
|
||||
import mp41 from '../../assets/video/1.mp4'
|
||||
import mp42 from '../../assets/video/2.mp4'
|
||||
import mp43 from '../../assets/video/3.mp4'
|
||||
import mp44 from '../../assets/video/4.mp4'
|
||||
@ -293,7 +239,7 @@ export default {
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
baseActiveIndex: 0,
|
||||
activeIndex: 2,
|
||||
activeIndex: 1,
|
||||
videoActiveIndex: 0,
|
||||
|
||||
tabWidth: 30,
|
||||
@ -310,69 +256,12 @@ export default {
|
||||
itemTop() {
|
||||
return {top: this.addCount * 812 + 'px'}
|
||||
},
|
||||
tabIndexStyle() {
|
||||
return {
|
||||
width: `${this.tabWidth * 0.7}px`,
|
||||
//如果用slide emit的moveX会很卡很卡
|
||||
transform: `translate3d(${this.tabIndexRelationActiveIndexLefts[this.activeIndex]}px, 0, 0)`,
|
||||
'transition-duration': '300ms',
|
||||
}
|
||||
},
|
||||
toolbarStyle() {
|
||||
return {
|
||||
opacity: 1 - this.slideMoveYDistance / 20,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
return {
|
||||
opacity: this.slideMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
|
||||
}
|
||||
},
|
||||
loadingStyle() {
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
}
|
||||
}
|
||||
if (this.slideMoveYDistance !== 0) {
|
||||
return {
|
||||
opacity: this.slideMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.slideMoveYDistance > 60 ? 60 : this.slideMoveYDistance}px, 0)`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let tabs = this.$refs.tabs
|
||||
// let tabWidth = this.$getCss(tabs, 'width')
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
let item = tabs.children[i]
|
||||
this.tabWidth = this.$getCss(item, 'width')
|
||||
this.tabIndexRelationActiveIndexLefts.push(
|
||||
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + this.tabWidth * 0.15)
|
||||
}
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
},
|
||||
methods: {
|
||||
end() {
|
||||
if (this.slideMoveYDistance > 60) {
|
||||
this.getData()
|
||||
}
|
||||
this.slideMoveYDistance = 0;
|
||||
this.toolbarStyleTransitionDuration = 300
|
||||
},
|
||||
first(e) {
|
||||
if (this.loading) return
|
||||
this.slideMoveYDistance = e
|
||||
this.toolbarStyleTransitionDuration = 0
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
@ -412,67 +301,5 @@ export default {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.toolbar-ctn {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
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: 20px;
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
color: white;
|
||||
//background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
//display: none;
|
||||
|
||||
.tab-ctn {
|
||||
width: 40%;
|
||||
position: relative;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.index {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -27,7 +27,7 @@
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<p>我页面</p>
|
||||
<SlideList key1="父" style="width: 100vw;">
|
||||
<SlideList style="width: 100vw;" :active-index="contentIndex">
|
||||
<SlideItem>
|
||||
1
|
||||
</SlideItem>
|
||||
@ -35,7 +35,7 @@
|
||||
2
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<div>
|
||||
<div class="content">
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
<p>喜欢</p>
|
||||
@ -142,7 +142,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
serviceEl: {},
|
||||
serviceHeight: 0
|
||||
serviceHeight: 0,
|
||||
contentIndex:0
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,23 +1,255 @@
|
||||
<template>
|
||||
<div className="Me">
|
||||
<SlideList key1="父" style="width: 100vw;">
|
||||
<SlideItem>
|
||||
<div class="Me" >
|
||||
<div class="wrapper">
|
||||
<div class="left">
|
||||
<header>
|
||||
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
||||
<img src="../../assets/img/icon/more.svg" alt="">
|
||||
</header>
|
||||
<div class="detail">
|
||||
<div class="head">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" class="head-image">
|
||||
<div class="other-buttons" v-if="false">
|
||||
<div class="attention">
|
||||
关注
|
||||
</div>
|
||||
<div class="more-attention">
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-buttons ">
|
||||
<div class="collect">
|
||||
<img src="../../assets/img/icon/collect-white.svg" alt="">
|
||||
<span class="mr5p">收藏</span>
|
||||
</div>
|
||||
<div class="add-friend">
|
||||
<img src="../../assets/img/icon/add-friend-white.svg" alt="">
|
||||
</div>
|
||||
<div class="qr-code">
|
||||
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p class="name f22 mt5p mb5p">ttentau</p>
|
||||
<div class="number mb10p">
|
||||
<span>抖音号：605128307</span>
|
||||
<div class="jrtt">
|
||||
<img src="../../assets/img/icon/sina.svg" alt="">
|
||||
<span>头条主页</span>
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="signature f12 mb10p">
|
||||
<span>填写个性签名更容易获得别人关注哦</span>
|
||||
</div>
|
||||
<div class="info f10 mb10p">
|
||||
<div class="age">
|
||||
<img src="../../assets/img/icon/person.svg" alt="">
|
||||
<span>22岁</span>
|
||||
</div>
|
||||
<div class="location">
|
||||
<span>上海</span>
|
||||
</div>
|
||||
<div class="school">
|
||||
四川理工大学
|
||||
</div>
|
||||
</div>
|
||||
<div class="heat">
|
||||
<span>8获赞</span>
|
||||
<span>38关注</span>
|
||||
<span>42粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator-ctn">
|
||||
<div class="tabs-text-ctn">
|
||||
<div class="tab-text active">作品1</div>
|
||||
<div class="tab-text">作品1</div>
|
||||
<div class="tab-text">作品1</div>
|
||||
</div>
|
||||
<div class="indicator"></div>
|
||||
</div>
|
||||
<div class="tabs-ctn">
|
||||
<div class="tabs">
|
||||
<div class="tab tab1">
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
</div>
|
||||
<div class="tab tab2">
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
</div>
|
||||
<div class="tab tab3">
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
<p>12</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<my-footer v-bind:init-tab="5"></my-footer>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ul>
|
||||
<li @click="nav('MyCard')">
|
||||
<img src="../../assets/img/icon/card-gray.png" alt="">
|
||||
<span>个人名片</span>
|
||||
</li>
|
||||
<li @click="nav('MyCollect')">
|
||||
<img src="../../assets/img/icon/collect-gray.png" alt="">
|
||||
<span>我的收藏</span>
|
||||
</li>
|
||||
<div class="line"></div>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/wallet-gray.png" alt="">
|
||||
<span>钱包</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="">
|
||||
<span>订单</span>
|
||||
</li>
|
||||
<li class="exception" @click="toggleService()">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="../../assets/img/icon/category-gray.png" alt="">
|
||||
<span>服务</span>
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</li>
|
||||
<div class="service">
|
||||
<li>
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
|
||||
<span>购物助手</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
|
||||
<span>生活服务订单</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
|
||||
<span>DOU+ 上热门</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
|
||||
<span>彩铃服务</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
|
||||
<span>免流量看抖音</span>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
</SlideItem>
|
||||
</SlideList>
|
||||
<div class="line"></div>
|
||||
|
||||
<li>
|
||||
<img src="../../assets/img/icon/link-gray.png" alt="">
|
||||
<span>小程序</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../../assets/img/icon/juan-gray.png" alt="">
|
||||
<span>卡卷</span>
|
||||
</li>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<li>
|
||||
<img src="../../assets/img/icon/umbrella-gray.png" alt="">
|
||||
<span>未成年保护工具</span>
|
||||
</li>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<li>
|
||||
<img src="../../assets/img/icon/setting-gray.png" alt="">
|
||||
<span>设置</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Footer from '../../components/Footer.vue'
|
||||
import Comment from "../../components/Comment";
|
||||
import Share from "../../components/Share";
|
||||
import Other from "../../components/Other";
|
||||
import SlideList from "./SlideList";
|
||||
import SlideItem from "./SlideItem";
|
||||
import Footer from '../../components/Footer'
|
||||
|
||||
export default {
|
||||
name: "Me",
|
||||
components: {Footer, Comment, Share, Other, SlideList, SlideItem},
|
||||
components: { 'my-footer': Footer },
|
||||
data() {
|
||||
return {
|
||||
serviceEl: {},
|
||||
@ -442,7 +674,7 @@ export default {
|
||||
console.log(this.serviceEl.style.height)
|
||||
if (this.serviceEl.style.height === this.serviceHeight + 'px') {
|
||||
this.serviceEl.style.height = 0
|
||||
} else {
|
||||
}else {
|
||||
this.serviceEl.style.height = this.serviceHeight + 'px'
|
||||
}
|
||||
}
|
||||
@ -454,8 +686,279 @@ export default {
|
||||
$left-bg-color: #333;
|
||||
$right-bg-color: #2e3244;
|
||||
.Me {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $left-bg-color;
|
||||
overflow-y: scroll;
|
||||
|
||||
header {
|
||||
height: 150px;
|
||||
/* background-image: url('./imgs/header2.jpg'); */
|
||||
background-image: url('data:image/jpeg;base64,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');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/*background: url("../../assets/img/icon/top-bg.jpg");*/
|
||||
padding: 20px;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
background: #524a4a;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.detail {
|
||||
background: $left-bg-color;
|
||||
padding: 0 20px;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
transform: translateY(-20px);
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.my-buttons {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
|
||||
img {
|
||||
padding: 6px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
color: white;
|
||||
transform: translateY(-20px);
|
||||
|
||||
.number {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid gray;
|
||||
|
||||
.jrtt {
|
||||
float: right;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heat {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-ctn {
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
left: 0;
|
||||
transition: all 0.3s ease 0s;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab {
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: red;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.tab:nth-child(2) {
|
||||
left: 100%;
|
||||
background: gold;
|
||||
}
|
||||
|
||||
.tab:nth-child(3) {
|
||||
left: 200%;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.indicator-ctn {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.indicator-ctn.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
height: 2px;
|
||||
background: gold;
|
||||
width: 30%;
|
||||
margin-left: 1.5%;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.tabs-text-ctn {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.tab-text.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
color: white;
|
||||
background: $right-bg-color;
|
||||
|
||||
ul {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: #cccccc;
|
||||
opacity: .1;
|
||||
margin: 5px 20px;
|
||||
}
|
||||
|
||||
.service {
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
background: $right-bg-color;
|
||||
padding: 20px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:active {
|
||||
background: #454b65;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&.exception {
|
||||
justify-content: space-between;
|
||||
|
||||
.triangle {
|
||||
transform: translateY(3px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 7px solid #cccccc;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,25 @@
|
||||
<template>
|
||||
<div id="base-slide-wrapper" ref="slideWrapper">
|
||||
<div class="toolbar-ctn" v-if="showIndicator">
|
||||
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
|
||||
<div class="toolbar" ref="toolbar" :style="toolbarStyle">
|
||||
<div class="left">直播</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>
|
||||
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
|
||||
</div>
|
||||
<div class="loading" :style="loadingStyle">AA</div>
|
||||
</div>
|
||||
<div id="base-slide-list" ref="slideList"
|
||||
:style="{'flex-direction':direction}"
|
||||
@touchstart="touchStart($event)"
|
||||
@ -18,6 +38,14 @@ export default {
|
||||
type: String,
|
||||
default: () => 'row'
|
||||
},
|
||||
showIndicator: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
useHomeLoading: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
virtual: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
@ -30,22 +58,50 @@ export default {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
// slideMoveXDistance: {
|
||||
// type: Number,
|
||||
// default: () => 0
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
toolbarStyle() {
|
||||
if (!this.useHomeLoading) return
|
||||
return {
|
||||
opacity: 1 - this.homeLoadingMoveYDistance / 20,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
}
|
||||
},
|
||||
noticeStyle() {
|
||||
if (!this.useHomeLoading) return
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
}
|
||||
},
|
||||
loadingStyle() {
|
||||
if (!this.useHomeLoading) return
|
||||
if (this.loading) {
|
||||
return {
|
||||
opacity: 1,
|
||||
'transition-duration': '300ms',
|
||||
}
|
||||
}
|
||||
if (this.homeLoadingMoveYDistance !== 0) {
|
||||
return {
|
||||
opacity: this.homeLoadingMoveYDistance / 60,
|
||||
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
wrapperWidth: 0,
|
||||
wrapperHeight: 0,
|
||||
|
||||
startLocationX: 0,
|
||||
startLocationY: 0,
|
||||
|
||||
lastLocationX: 0,
|
||||
lastLocationY: 0,
|
||||
|
||||
moveXDistance: 0,
|
||||
moveYDistance: 0,
|
||||
|
||||
@ -61,42 +117,59 @@ export default {
|
||||
|
||||
slideList: null,
|
||||
slideItems: null,
|
||||
indicatorRef: null,
|
||||
slideItemsWidths: [],
|
||||
slideItemsHeights: [],
|
||||
tabIndicatorRelationActiveIndexLefts: [],//指标和slideItem的index的对应left,
|
||||
indicatorSpace: 0,//indicator之间的间距
|
||||
toolbarStyleTransitionDuration: 0,
|
||||
homeLoadingMoveYDistance: 0,//homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex() {
|
||||
this.currentSlideItemIndex = this.activeIndex
|
||||
this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
if (this.direction === 'row') {
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`)
|
||||
} else {
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px, 0px)`)
|
||||
}
|
||||
}
|
||||
this.changeIndex()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.checkChildren(true)
|
||||
this.currentSlideItemIndex = this.activeIndex
|
||||
if (this.direction === 'row') {
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
|
||||
} else {
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
|
||||
}
|
||||
this.showIndicator && this.initTabs()
|
||||
this.changeIndex(true)
|
||||
},
|
||||
methods: {
|
||||
// emitMoveXDistance: _.throttle(function () {
|
||||
// // this.$emit('moveXDistance', this.moveXDistance)
|
||||
// this.$emit('update:test', this.moveXDistance)
|
||||
// }, 500),
|
||||
changeIndex(init = false, index = null) {
|
||||
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
|
||||
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
if (this.direction === 'row') {
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
|
||||
if (this.showIndicator) {
|
||||
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
|
||||
}
|
||||
} else {
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
|
||||
}
|
||||
},
|
||||
initTabs() {
|
||||
let tabs = this.$refs.tabs
|
||||
this.indicatorRef = this.$refs.indicator
|
||||
for (let i = 0; i < tabs.children.length; i++) {
|
||||
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)
|
||||
}
|
||||
this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||
if (this.showIndicator) {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
|
||||
}
|
||||
},
|
||||
checkChildren(init) {
|
||||
this.slideList = this.$refs.slideList
|
||||
this.slideItems = this.slideList.children
|
||||
this.wrapperWidth = this.$getCss(this.slideList, 'width')
|
||||
this.wrapperHeight = this.$getCss(this.slideList, 'height')
|
||||
// console.log(this.wrapperWidth)
|
||||
// console.log(this.wrapperHeight)
|
||||
|
||||
for (let i = 0; i < this.slideItems.length; i++) {
|
||||
let el = this.slideItems[i]
|
||||
@ -106,42 +179,44 @@ export default {
|
||||
},
|
||||
touchStart(e) {
|
||||
this.$setCss(this.slideList, 'transition-duration', `0ms`)
|
||||
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.toolbarStyleTransitionDuration = 0
|
||||
|
||||
this.startLocationX = e.touches[0].pageX
|
||||
this.startLocationY = e.touches[0].pageY
|
||||
// console.log('this.startLocationX', this.startLocationX)
|
||||
// console.log('this.startLocationY', this.startLocationY)
|
||||
this.startTime = Date.now()
|
||||
},
|
||||
touchMove(e) {
|
||||
// console.log(e)
|
||||
this.lastLocationX = e.touches[0].pageX
|
||||
this.lastLocationY = e.touches[0].pageY
|
||||
this.moveXDistance = this.lastLocationX - this.startLocationX
|
||||
this.moveYDistance = this.lastLocationY - this.startLocationY
|
||||
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
||||
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||
|
||||
// console.log(this.key)
|
||||
// console.log(this.direction + ' moveXDistance', this.moveXDistance)
|
||||
// console.log(this.direction + ' moveYDistance', this.moveYDistance)
|
||||
|
||||
// console.log('currentSlideItemIndex', this.currentSlideItemIndex)
|
||||
this.isDrawRight = this.moveXDistance < 0
|
||||
this.isDrawDown = this.moveYDistance < 0
|
||||
|
||||
this.checkDirection()
|
||||
|
||||
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
|
||||
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance
|
||||
if (this.useHomeLoading && this.isCanDownWiping && !this.loading) {
|
||||
this.homeLoadingMoveYDistance = this.moveYDistance
|
||||
}
|
||||
|
||||
if (this.direction === 'row') {
|
||||
if (this.isCanRightWiping) {
|
||||
// //禁止在index=0页面的时候，向左划
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
|
||||
//禁止在最后页面的时候，向右划
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
|
||||
// this.$attrs['onUpdate:slideMoveXDistance'] && this.$emit('update:slideMoveXDistance', this.moveXDistance)
|
||||
|
||||
this.stop(e)
|
||||
this.$stopPropagation(e)
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
|
||||
this.showIndicator && this.$setCss(this.indicatorRef, 'left',
|
||||
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
|
||||
this.moveXDistance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
|
||||
}
|
||||
} else {
|
||||
if (this.isCanDownWiping) {
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) {
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) {//在第一个item，并且想往下划。
|
||||
this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
|
||||
return
|
||||
}
|
||||
@ -151,15 +226,28 @@ export default {
|
||||
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
|
||||
}
|
||||
// this.$attrs.moveYDistance && this.$emit('moveYDistance', this.moveYDistance)
|
||||
this.stop(e)
|
||||
this.$stopPropagation(e)
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
|
||||
}
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
},
|
||||
touchEnd(e) {
|
||||
// console.log(this.$attrs)
|
||||
this.$attrs['onEnd'] && this.$emit('end')
|
||||
if (this.useHomeLoading) {
|
||||
if (this.homeLoadingMoveYDistance > 60) {
|
||||
this.getData()
|
||||
}
|
||||
this.toolbarStyleTransitionDuration = 300
|
||||
this.homeLoadingMoveYDistance = 0
|
||||
}
|
||||
this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||
let endTime = Date.now()
|
||||
let gapTime = endTime - this.startTime
|
||||
// console.log(gapTime)
|
||||
@ -177,6 +265,9 @@ export default {
|
||||
}
|
||||
}
|
||||
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex)}px, 0px, 0px)`)
|
||||
if (this.showIndicator) {
|
||||
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
|
||||
}
|
||||
} else {
|
||||
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
|
||||
//禁止在最后页面的时候，向右划
|
||||
@ -211,11 +302,6 @@ export default {
|
||||
this.moveXDistance = 0
|
||||
this.moveYDistance = 0
|
||||
},
|
||||
stop(e) {
|
||||
e.stopImmediatePropagation()
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
},
|
||||
getWidth(index) {
|
||||
return this.slideItemsWidths.reduce((p, c, i) => {
|
||||
if (i < index) {
|
||||
@ -257,9 +343,7 @@ export default {
|
||||
this.isCanDownWiping = false
|
||||
this.isCanRightWiping = true
|
||||
this.isNeedCheck = false
|
||||
return
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -277,6 +361,79 @@ export default {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-ctn {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
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: 20px;
|
||||
right: 15px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 15px;
|
||||
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: -8px;
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user