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

优化me页面滑动逻辑

pull/19/head
zyronon 6 years ago
parent
2b762a2efa
commit
bd19a30ca1
2 changed files with 85 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/pages/home/Me.vue
  2. 134
      src/pages/home/Message.vue

16
src/pages/home/Me.vue
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
<template>
<div class="Me">
<div class="wrapper" >
<div class="wrapper">
<div class="left">
<header>
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
@ -155,7 +155,7 @@ @@ -155,7 +155,7 @@
</div>
</div>
</div>
<my-footer v-bind:init-tab="5" ></my-footer>
<my-footer v-bind:init-tab="5"></my-footer>
</div>
<div class="right">
<ul>
@ -282,7 +282,7 @@ @@ -282,7 +282,7 @@
}
isDrawRight = moveXDistance < 0
if (isDrawRight) {
wrapper.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
wrapper.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue + 'px'
} else {
wrapper.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
}
@ -293,7 +293,7 @@ @@ -293,7 +293,7 @@
}
isDrawRight = moveXDistance < 0
if (isDrawRight) {
wrapper.style.left = -(currentSwiperItemIndex + 0) * rightWidth + moveXDistance + 'px'
wrapper.style.left = -(currentSwiperItemIndex + 0) * rightWidth + moveXDistance - judgeValue + 'px'
} else {
wrapper.style.left = -(currentSwiperItemIndex + 0) * rightWidth + moveXDistance + 'px'
}
@ -312,7 +312,7 @@ @@ -312,7 +312,7 @@
//点击的是左边，并且是菜单展开状态，并且移动距离等于 0，那么就收起来
let left = getCss(wrapper, 'left')
if (e.path.includes(leftEl) && left !== 0 && moveXDistance === 0) {
wrapper.style.transition = 'all .3s'
wrapper.style.transition = 'all .2s'
wrapper.style.left = 0
leftEl.style.opacity = 1
resetConfig()
@ -322,7 +322,7 @@ @@ -322,7 +322,7 @@
}
if (isCanRightWiping) {
if (!moveXDistance) return
wrapper.style.transition = 'all .3s'
wrapper.style.transition = 'all .2s'
let endTime = Date.now()
let gapTime = endTime - startTime
@ -471,7 +471,7 @@ @@ -471,7 +471,7 @@
e.stopPropagation()
if (isDrawRight) {
indicator.style.marginLeft = (1.5 + (currentSwiperItemIndex + 0) * 33 + Math.abs(moveXDistance) / width / 3 * 100) + '%'
tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue + 'px'
} else {
if (currentSwiperItemIndex === 0) {
return tabs.style.left = 0
@ -482,7 +482,7 @@ @@ -482,7 +482,7 @@
} else {
indicator.style.marginLeft = '1.5%'
}
tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance + 'px'
tabs.style.left = -(currentSwiperItemIndex + 0) * width + moveXDistance - judgeValue + 'px'
}
}
})

134
src/pages/home/Message.vue
Unescape View File

@ -1,13 +1,14 @@ @@ -1,13 +1,14 @@
<template>
<div class="message">
<div class="container p15p">
<div class="header">
<div id="Message">
<div class="container">
<div class="header pt15p">
<div class="title">
<p class="tac fb c-white ">消息</p>
<span>联系人</span>
</div>
</div>
<div class="toolbar mt20p">
<div class="line mt20p"></div>
<div class="toolbar mt30p">
<div>
<img src="../../assets/img/icon/msg-icon1.png" alt="">
<span>粉丝</span>
@ -25,47 +26,38 @@ @@ -25,47 +26,38 @@
<span>随拍互动</span>
</div>
</div>
<div class="messages mt20p">
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="line mt20p"></div>
<div class="messages mt10p">
<div class="message top">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="content">
<div class="left">
<div class="name">游戏小助手</div>
<div class="detail">抖出好游戏</div>
</div>
</div>
<div class="love pull-right">
<span class="f14 block">20:54</span>
</div>
</div>
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">抖音小助手</div>
<div class="detail">抖音美好奇妙夜小贴士</div>
<div class="right">
<div class="f14">20:54</div>
<div class="number">9</div>
</div>
</div>
<div class="love pull-right">
<span class="f14 block">20:54</span>
</div>
</div>
<div class="message oh mt15p">
<div class="content pull-left ">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="pull-right comment-container">
<div class="name">TTentau</div>
<div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
<div class="message">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
<div class="content">
<div class="left">
<div class="name">游戏小助手</div>
<div class="detail">抖出好游戏</div>
</div>
<div class="right">
<div class="f14">20:54</div>
<div class="number">9</div>
</div>
</div>
<div class="love pull-right">
<span class="f14 block">20:54</span>
</div>
</div>
</div>
<p class="tac">无更多消息</p>
<p class="tac mt18p f12">无更多消息</p>
</div>
<Footer v-bind:init-tab="4" />
<Footer v-bind:init-tab="4"/>
</div>
</template>
@ -78,8 +70,7 @@ @@ -78,8 +70,7 @@
Footer
},
data() {
return {
}
return {}
},
created() {
@ -90,7 +81,7 @@ @@ -90,7 +81,7 @@
</script>
<style scoped lang="scss">
.message {
#Message {
font-size: 1.6rem;
background: #2e3244;
color: #b8b9c1;
@ -129,38 +120,67 @@ @@ -129,38 +120,67 @@
}
.messages {
.line {
margin: 0 20px;
border-top: 1px solid #494950;
}
.messages {
.message {
.content {
float: left;
width: 85%;
padding:13px 20px;
display: flex;
align-items: center;
.head-image {
width: 40px;
border-radius: 50%;
float: left;
}
&.top{
background: #353a4f;
}
&:active{
background: #353a4f;
}
.comment-container {
width: 85%;
.head-image {
margin-right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.content {
flex: 1;
display: flex;
justify-content: space-between;
.time {
color: gray;
.left {
.name {
color: white;
}
}
}
.detail {
margin-top: 5px;
font-size: 14px;
}
}
.love {
text-align: center;
.right {
font-size: 14px;
text-align: center;
.number {
display: inline-block;
min-height: 20px;
min-width: 20px;
text-align: center;
color: black;
margin-top: 5px;
/*padding: 5px;*/
background: yellow;
border-radius: 50%;
.love-image {
width: 30px;
border-radius: 50%;
}
}
}
}
}
}

Write Preview
Loading…
Cancel
Save