...
|
...
|
@@ -25,9 +25,10 @@ |
|
|
class="main-container"
|
|
|
ref="scroll"
|
|
|
:options="scrollOpts"
|
|
|
:scroll-events="['scroll', 'scroll-end']"
|
|
|
:scroll-events="['scroll', 'scroll-end', 'before-scroll-start']"
|
|
|
@scroll="onScrollHandle"
|
|
|
@scroll-end="onScrollEndHandle">
|
|
|
@scroll-end="onScrollEndHandle"
|
|
|
@before-scroll-start="beforeScrollStartHandle">
|
|
|
<div ref="authorProfile" class="author-profile">
|
|
|
<span class="avatar-box">
|
|
|
<WidgetAvatar :src="authorBaseData.headIco" :width="100" :height="100"></WidgetAvatar>
|
...
|
...
|
@@ -50,7 +51,7 @@ |
|
|
<FavTabBlock :tabs-num="tabsNum" :active-index="activeIndex" @change="changeTab"></FavTabBlock>
|
|
|
</div>
|
|
|
<div ref="contantList" class="contant-list" :style="`min-height: ${listMinHeight}px;`">
|
|
|
<p v-if="emptyTip" class="empty-tip" :height="emptyTipHeight">{{emptyTip}}</p>
|
|
|
<p v-if="emptyTip" class="empty-tip">{{emptyTip}}</p>
|
|
|
<WaterFall class="pannel-wrap" :list="list" :params="params"></WaterFall>
|
|
|
<div v-if="loadStatus && !emptyTip" class="loading">
|
|
|
<Loading v-if="loadStatus === 1" class="load-icon" :size="20"></Loading>
|
...
|
...
|
@@ -59,7 +60,7 @@ |
|
|
</div>
|
|
|
</cube-scroll>
|
|
|
|
|
|
<a v-if="isOwner" class="publish hover-opacity" :href="publishUrl"></a>
|
|
|
<a v-if="isOwner" class="publish hover-opacity" :class="{'scroll-opacity': scrolling}" :href="publishUrl"></a>
|
|
|
</Layout>
|
|
|
</template>
|
|
|
|
...
|
...
|
@@ -78,6 +79,7 @@ |
|
|
data() {
|
|
|
return {
|
|
|
scrollY: 0,
|
|
|
scrolling: false,
|
|
|
mineInfoUrl: '//m.yohobuy.com/home/mydetails?openby:yohobuy={"action":"go.mineinfo"}',
|
|
|
publishUrl: '?openby:yohobuy={"action":"go.grasspublish"}',
|
|
|
autherInfo: {},
|
...
|
...
|
@@ -92,7 +94,6 @@ |
|
|
listMinHeight: 0,
|
|
|
fetchInfo: {},
|
|
|
loadStatus: '',
|
|
|
emptyTipHeight: '',
|
|
|
emptyTip: '',
|
|
|
scrollOpts: {
|
|
|
bounce: false
|
...
|
...
|
@@ -109,7 +110,6 @@ |
|
|
this.init(this.$route.params);
|
|
|
|
|
|
this.listMinHeight = this.$el.offsetHeight - this.$refs.tabBlock.offsetHeight - $dom.offsetHeight;
|
|
|
this.emptyTipHeight = this.$el.offsetHeight - this.$refs.contantList.offsetTop - $dom.offsetHeight - 40;
|
|
|
|
|
|
if ($dom.offsetHeight) {
|
|
|
this._animeDuration = 300;
|
...
|
...
|
@@ -238,6 +238,7 @@ |
|
|
this._animePlayed = animePlayed;
|
|
|
},
|
|
|
onScrollEndHandle(scroll) {
|
|
|
this.scrolling = false;
|
|
|
if (1000 - scroll.y > this.$refs.contantList.offsetHeight) {
|
|
|
this._listTimer && clearTimeout(this._listTimer);
|
|
|
this._listTimer = setTimeout(() => {
|
...
|
...
|
@@ -245,6 +246,9 @@ |
|
|
}, 50);
|
|
|
}
|
|
|
},
|
|
|
beforeScrollStartHandle() {
|
|
|
this.scrolling = true;
|
|
|
},
|
|
|
changeTab(index) {
|
|
|
if (this.activeIndex !== index) {
|
|
|
this.activeIndex = index;
|
...
|
...
|
@@ -550,13 +554,20 @@ |
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.contant-list {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.empty-tip {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 1000px;
|
|
|
font-size: 28px;
|
|
|
color: #ddd;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
bottom: 240px;
|
|
|
}
|
|
|
|
|
|
.loading {
|
...
|
...
|
@@ -580,5 +591,10 @@ |
|
|
background-image: url('../../statics/image/userpage/publish.png');
|
|
|
background-size: 100% 100%;
|
|
|
z-index: 10;
|
|
|
transition: all 600ms ease-in-out;
|
|
|
|
|
|
&.scroll-opacity {
|
|
|
opacity: 0.3;
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|