fe / yoho-community-web · Commits

Go to a project

Authored by yyq
Commit a9ab72124105858bc5b4ce30196c79e9576584ed 1 parent e3068583

article scroll

Inline Side-by-side
Showing 4 changed files with 72 additions and 40 deletions
... ... @@ -62,11 +62,7 @@ export default {
serverPrefetch() {
const articleId = parseInt(this.$route.params.id, 10);
if (articleId > 0) {
return this.syncServiceArticleDetail(true);
}
return Promise.resolve();
return articleId > 0 ? this.syncServiceArticleDetail(true) : Promise.resolve();
},
mounted() {
this.colWidthForTwo = Math.floor(this.$el.offsetWidth / 2);
... ... @@ -99,29 +95,40 @@ export default {
singleDetail: 'Y',
thumb
}).then(res => {
if (res.code !== 200) {
return;
const emptyData = {
articleId,
empty: true
};
let article = {};
if (res.code === 200) {
article = get(res, 'data.detailList[0]', {...emptyData});
if (thumb) {
article.comments = [];
article.hasAttention = '';
article.hasFavor = '';
article.hasPraise = '';
article.commentCount = 0;
article.favoriteCount = 0;
article.praiseCount = 0;
}
} else if (res.code === 403) {
article = {...emptyData};
} else {
article = {...emptyData, emptyTip: res.message};
}
let article = get(res, 'data.detailList[0]', {});
if (thumb) {
article.comments = [];
article.hasAttention = '';
article.hasFavor = '';
article.hasPraise = '';
article.commentCount = 0;
article.favoriteCount = 0;
article.praiseCount = 0;
} else if (this.$refs.scroll) {
this.article = article;
if (this.$refs.scroll) {
this.listTitle = '';
this.$nextTick(() => {
this.$refs.scroll.init();
});
}
this.article = article;
});
},
async onFetch() {
... ... @@ -191,7 +198,6 @@ export default {
background-color: #f0f0f0;
}
/deep/ .loading {
height: 100px;
visibility: hidden;
display: none;
}
</style>
... ...
... ... @@ -63,6 +63,17 @@ export default {
height: 100px;
border-top: 1px solid #f0f0f0;
background-color: white;
position: relative;
&.disable:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
}
.tool-bar {
... ...
... ... @@ -2,7 +2,7 @@
<div class="article-detail-long">
<ArticleDetailHeader ref="header" :data="data" :step="headerAnimateStep" :title-step="headerTitleAnimateStep">
<div class="title-main">
<div class="title-info" :style="`transform: translate3d(0, ${titleTranslateY}, 0)`">
<div class="title-info" :style="`transform: translate3d(0, ${viewMoreArticles ? '-50%' : '0'}, 0)`">
<ArticleItemHeader class="title-info-author" :share="share" :data="authorData" :lazy="lazy" :more="showMoreOpt" @on-follow="onFollowAuthor"></ArticleItemHeader>
<div class="title-info-rec">{{listTitle}}</div>
</div>
... ... @@ -29,7 +29,7 @@
<LayoutTitle v-if="listTitle" class="rec-article-title">{{listTitle}}</LayoutTitle>
</div>
<ArticleDetailFooter class="detail-fixed-footer" v-bind="footerData" @on-comment-click="onComment">
<ArticleDetailFooter class="detail-fixed-footer" :style="`transform: translate3d(0, ${viewMoreArticles ? '100%' : '0'}, 0)`" v-bind="footerData" @on-comment-click="onComment">
<template v-slot:after>
<div v-if="articleProducts.length" class="article-goods">文中商品</div>
<div v-else></div>
... ... @@ -171,14 +171,14 @@ export default {
return 0;
},
titleTranslateY() {
viewMoreArticles() {
let scrollTop = this.scrollTop;
if (this.$refs && this.$refs.header) {
scrollTop += this.$refs.header.$el.offsetHeight;
return scrollTop > this.$el.offsetHeight ? '-50%' : 0;
return scrollTop > this.$el.offsetHeight;
} else {
return 0;
return false;
}
},
authorData() {
... ... @@ -239,7 +239,7 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
.title-main {
height: 100%;
color: #444;
... ... @@ -247,7 +247,7 @@ export default {
.title-info {
height: 200%;
transition: all 300ms;
transition: all 200ms;
> * {
height: 50%;
... ... @@ -333,6 +333,7 @@ export default {
position: fixed;
bottom: 0;
z-index: 10;
transition: all 300ms;
.article-goods {
width: 200px;
... ...
<template>
<div class="article-detail-notes">
<ArticleDetailHeader ref="header" :data="data" :step="100" :title-step="100">
<div class="title-main">
<div class="title-info" :style="`transform: translate3d(0, ${titleTranslateY}, 0)`">
<div v-if="!data.empty" class="title-main">
<div class="title-info" :style="`transform: translate3d(0, ${viewMoreArticles ? '-50%' : '0'}, 0)`">
<ArticleItemHeader class="title-info-author" :share="share" :data="authorData" :lazy="lazy" :more="false" @on-follow="onFollowAuthor"></ArticleItemHeader>
<div class="title-info-rec">{{listTitle}}</div>
</div>
... ... @@ -10,7 +10,10 @@
</ArticleDetailHeader>
<LayoutHeader style="visibility: hidden;"></LayoutHeader>
<div class="article-context">
<div v-if="data.empty" class="article-empty">
{{data.emptyTip || '文章不存在或文章被删除'}}
</div>
<div v-else class="article-context">
<ArticleItemSlide :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
<ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
... ... @@ -23,12 +26,12 @@
</div>
<p class="publish-time">{{publishTime}}</p>
<ArticleDetailCommentList ref="commentList" v-if="data.commentCount" :article-id="data.articleId" :comment-count="data.commentCount"></ArticleDetailCommentList>
</div>
<div v-if="listTitle" class="rec-article-title">
<LayoutTitle>{{listTitle}}</LayoutTitle>
</div>
<div v-if="listTitle" class="rec-article-title">
<LayoutTitle>{{listTitle}}</LayoutTitle>
</div>
<ArticleDetailFooter ref="footer" class="detail-fixed-footer" v-bind="footerData" @on-comment-click="toCommentList">
<ArticleDetailFooter ref="footer" class="detail-fixed-footer" :class="{'disable': data.empty}" :style="`transform: translate3d(0, ${viewMoreArticles ? '100%' : '0'}, 0)`" v-bind="footerData" @on-comment-click="toCommentList">
<template v-slot:before>
<div class="footer-comment">
<CommentPlaceholder
... ... @@ -98,14 +101,14 @@ export default {
return Object.assign({...articleState}, {hasAttention: authorState.hasAttention});
},
titleTranslateY() {
viewMoreArticles() {
let scrollTop = this.scrollTop;
if (this.$refs && this.$refs.header) {
scrollTop += this.$refs.header.$el.offsetHeight;
return scrollTop > this.$el.offsetHeight ? '-50%' : 0;
return scrollTop > this.$el.offsetHeight;
} else {
return 0;
return false;
}
},
authorData() {
... ... @@ -204,7 +207,7 @@ export default {
.title-info {
height: 200%;
transition: all 300ms;
transition: all 200ms;
> * {
height: 50%;
... ... @@ -229,6 +232,16 @@ export default {
}
}
.article-empty {
height: 900px;
color: #ccc;
font-size: 28px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
.topics-wrap {
display: flex;
margin-top: 40px;
... ... @@ -265,6 +278,7 @@ export default {
position: fixed;
bottom: 0;
z-index: 10;
transition: all 300ms;
.footer-comment {
width: 312px;
... ...