实战派,细节控|仿头条创作中心界面,我们不是花拳绣腿。

愿耐心阅读,愿有所收获。

Let's Go ！！！

part one 界面细节分析

(1) 头部导航,检测滚动添加导航背景颜色, 粘性导航。

(2) 公告栏, 便签和文字一起切换。(u-notice-bar组件实现)

(3) bannerIcon高度动态,多余10个收起,点击可展开剩余

(4) 课程模块可滚动(u-scroll-list组件)

(5) 作品Tab可滚动(u-tabs组件)

part two 方案分析

(1) 利用onPageScroll检测滚动事件,超过某Y轴滚动距离,动态设置style属性, 粘性导航可设置position: sticky;top: 0; z-index: 99999 !important即可。

(2) 利用组件实现即可u-notice-bar,但需自定义样式即可。

(3) bannerIcon高度动态,多余10个收起,点击可展开剩余 若多余10个可分为两个数组 第一数组装前十个 剩余装在第二个数组 展开时利用concat拼接即可。

(4) 利用组件实现即可u-scroll-list,但需自定义样式即可。

(5) 利用组件实现即可u-tabs,但需自定义样式即可。

-by小林°前端圈圈(如有疑问或有需要可私信小林共同学习)

源码如下[胡瓜]

<template>
<view class="content" @touchmove="scrollY">
<!-- 头部区域 -->
<view class="header"
:style="{transition: scrollTop > 50 ? 'all 0.1s' : '', backgroundColor: scrollTop > 50 ? '#fff' : '',borderBottom: scrollTop > 50 ? '1upx solid #f2f2f2' : ''}">
<view>
<image class="head_icon" mode="widthFix" src="../../static/icon/back.png"></image>
</view>
<view>创作中心</view>
<view>
<image class="head_icon" mode="widthFix" src="../../static/icon/add.png"></image>
<text class="head_text">发布</text>
</view>
</view>
<!-- 头部区域 -->
<!-- 头像区域 -->
<view class="head_user">
<view class="user_left">
<image class="user_icon" mode="widthFix" src="../../static/icon/avatar.jpg"></image> <text
class="user_text">在头条创作的第6天</text>
</view>
<view class="right_text">头条认证</view>
</view>
<!-- 头像区域 -->
<!-- 信息区域 -->
<view class="info_box">
<view class="info_child">
<view class="info_child_child">
<view class="head_info_box">
<view class="head_info_item">
<view>总阅读(播放)量</view>
<view>120</view>
<view>昨日 计算中</view>
</view>
<view class="head_info_item">
<view>总粉丝</view>
<view>120</view>
<view>昨日 计算中</view>
</view>
<view class="head_info_item">
<view>总收益</view>
<view>120</view>
<view>昨日 0.06
<image class="increse_icon" mode="widthFix" src="../../static/icon/increse.png"></image>
</view>
</view>
</view>
<view class="notice">
<view class="notice_child">
<view>重要</view>
<u-notice-bar color="#2e2e2e" direction="column" bgColor="#fff" icon="" :text="text1">
</u-notice-bar>
<view>更多
<image class="more_icon" mode="widthFix" src="../../static/icon/more.png"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 信息区域 -->
<!-- banner区域 -->
<view class="banner_box">
<view class="banner_child">
<view class="banner_item" v-for="(item,index) in bannerList" :key="index"
@click="bannerClick(item, index)">
<view>
<image class="banner_icon" mode="widthFix" :src="item.icon"></image>
</view>
<view class="banner_text">{{item.text}}</view>
</view>
</view>
</view>
<!-- banner区域 -->
<!-- banner图 -->
<view class="banner"></view>
<!-- banner图 -->
<!-- 课程区 -->
<view class="course_box">
<view class="course_child">
<view class="course_head">
<view>进阶创作课程</view>
<view>全部 <image class="more_icon" mode="widthFix" src="../../static/icon/more.png"></image>
</view>
</view>
<view class="course_content">
<u-scroll-list style="display: flex;" :indicator="indicator">
<view class="scroll-content" style="display: flex;">
<view v-for="item in list" :key="item.id" class="scroll-item">
<image class="img_content" mode="widthFix" :src="item.thumb"></image>
<text class="content_text">3分钟掌握如何发布图文内容</text>
</view>
</view>
</u-scroll-list>
</view>
</view>
</view>
<!-- 课程区 -->
<!-- 我的作品 -->
<view class="myView">
<view class="my_head">
<view>我的作品</view>
<view>
<image class="search_icon" mode="widthFix" src="../../static/icon/search.png"></image>
</view>
</view>
<view class="nav_box">
<u-tabs :list="list4" lineWidth="0" lineColor="" :activeStyle="{
color: '#d84a56',
fontWeight: 'bold',
transform: 'scale(1.02)',
border:'1px solid #ead3cf',
borderRadius:'60upx',
width: '120upx',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '50upx'
}" :inactiveStyle="{
color: '#525252',
transform: 'scale(1)',
border:'1px solid #eeeeee',
borderRadius:'60upx',
width: '120upx',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '50upx'
}" itemStyle="">
</u-tabs>
</view>
<view class="article_box">
<view class="article_item">
<view class="article_head">
<view>
<image class="article_cover" mode="widthFix"
src="https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg">
</image>
</view>
<view>
<view>超简洁! vue使用lframe完成文件在线预览功能</view>
<view>
<view>已发布</view>
<view>前天</view>
<view>多标题<image class="more_icon" mode="widthFix" src="../../static/icon/more.png">
</image>
</view>
</view>
</view>
</view>
<view class="article_info">
<view>
<view><text class="m-r">7612</text>展现</view>
<view><text class="m-r">7612</text>阅读</view>
<view><text class="m-r">7612</text>评论</view>
<view>详细数据<image class="more_icon" mode="widthFix" src="../../static/icon/more.png">
</image>
</view>
</view>
<view>· · ·</view>
</view>
</view>
</view>
</view>
<!-- 我的作品 -->
</view>
</template>
<script>
export default {
data() {
return {
bannerList: [{
icon: '../../static/icon/data.png',
text: '数据助手'
}, {
icon: '../../static/icon/收益管理.png',
text: '收益提现'
}, {
icon: '../../static/icon/权益.png',
text: '创作权益'
}, {
icon: '../../static/icon/data.png',
text: '数据助手'
}, {
icon: '../../static/icon/活动专区.png',
text: '活动广场'
}, {
icon: '../../static/icon/免费客服.png',
text: '客服中心'
}, {
icon: '../../static/icon/权益.png',
text: '首发维权'
}, {
icon: '../../static/icon/训练营.png',
text: '创作训练营'
}, {
icon: '../../static/icon/异常检测.png',
text: '账号检测'
}, {
icon: '../../static/icon/展开.png',
text: '展开'
}],
bannerElseList: [{
icon: '../../static/icon/快递外卖.png',
text: '美食外卖'
}],
scrollTop: 0,
list4: [{
name: '全部'
}, {
name: '已发布',
}, {
name: '审核中',
}, {
name: '未通过'
}, {
name: '仅我可见'
}],
indicator: false,
list: [{
thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
}, {
thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
}],
text1: ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用', '7788']
}
},
onPageScroll(e) {
// 页面滚动时触发的函数
this.scrollTop = e.scrollTop;
},
onLoad() {
this.bannerList = this.judgeBannerLength(this.bannerList)
},
methods: {
// 判断banner个数 超过10个开启展开收起效果
judgeBannerLength(arr) {
if (arr.length > 10) {
arr = arr.filter((item, index) => {
return index < 10
})
this.$set(arr[arr.length - 1], 'isOpenMore', false)
}
return arr;
},
bannerClick(item, index) {
console.log(item, index)
if (index == 9) {
this.$set(this.bannerList[9], 'isOpenMore', !this.bannerList[9].isOpenMore)
if (this.bannerList[9].isOpenMore) {
this.$set(this.bannerList[9], 'text', '收起')
this.$set(this.bannerList[9], 'icon', '../../static/icon/收起.png')
this.bannerList = this.bannerList.concat(this.bannerElseList)
} else {
this.$set(this.bannerList[9], 'text', '展开')
this.$set(this.bannerList[9], 'icon', '../../static/icon/展开.png')
this.bannerList = this.bannerList.filter((item, index) => {
return index < 10
})
}
}
},
scrollY() {
console.log('a')
},
left() {
console.log('left');
},
right() {
console.log('right');
}
}
}
</script>
<style scoped lang="scss">
.content {
width: 100vw;
min-height: 100vh;
height: auto;
background-color: #f8f8f8;
.myView {
width: 100%;
margin: 30upx 0;
background-color: #fff;
.article_box {
width: 95%;
height: 1000upx;
margin: 0 2.5%;
margin-top: 30upx;
.article_item {
width: 100%;
height: 200upx;
.more_icon {
width: 20upx;
height: 20upx !important;
margin-left: 6upx;
margin-top: 2upx;
}
.article_info {
width: 100%;
height: 80upx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1upx solid #f4f4f4;
color: #959595;
.m-r {
margin-right: 4upx;
}
&>view:first-child {
display: flex;
color: #959595;
font-size: 26upx;
&>view {
margin: 0 4upx;
}
}
}
.article_head {
width: 100%;
height: 150upx;
display: flex;
&>view:last-child {
&>view:first-child {
font-weight: bold;
padding-left: 10upx;
}
&>view:last-child {
color: #a2a2a2;
font-size: 28upx;
height: 60upx;
display: flex;
align-items: flex-end;
justify-content: flex-start;
&>view {
margin: 0 8upx;
display: flex;
flex-direction: row;
align-items: center;
}
}
}
.article_cover {
width: 300upx;
height: 150upx !important;
border: 1px solid #f1f1f1;
border-radius: 10upx;
}
}
}
}
.my_head {
width: 95%;
margin: 0 2.5%;
height: 100upx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
&>view:first-child {
font-weight: bold;
}
.search_icon {
width: 45upx;
height: 45upx;
}
}
}
.course_box {
width: 100%;
margin-top: 30upx;
.course_child {
width: 90%;
height: 90%;
background-color: #fff;
margin: 20upx 5%;
height: 380upx;
border-radius: 20upx;
.course_content {
width: 95%;
margin-left: 2.5%;
height: 280upx;
.scroll-item {
width: 300upx;
height: 100%;
margin: 0 10upx;
.img_content {
width: 100%;
height: 160upx !important;
border-radius: 8upx;
}
.content_text {
color: #2a2a2a;
font-size: 28upx;
width: 100%;
overflow: hidden;
}
}
}
.course_head {
width: 95%;
margin-left: 2.5%;
height: 80upx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
&>view:first-child {
font-weight: bold;
}
&>view:last-child {
color: #989898;
display: flex;
align-items: center;
justify-content: center;
.more_icon {
width: 20upx;
height: 20upx;
margin-left: 5upx;
}
}
}
}
}
.banner {
width: 90%;
margin: 30upx 5%;
height: 200upx;
background: url('@/static/icon/cheer.png') no-repeat;
background-position: center;
background-size: 100% 100%;
}
.banner_box {
width: 100%;
margin-top: 30upx;
transition: all 2s ease;
.banner_child {
width: 90%;
height: 90%;
margin: 20upx 5%;
background-color: #fff;
border-radius: 20upx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
transition: all 2s ease;
.banner_item {
width: 20%;
height: 150upx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 2s ease;
.banner_icon {
width: 50upx;
height: 50upx;
}
.banner_text {
font-weight: bold;
font-size: 25upx;
margin-top: 8upx;
}
}
}
}
.info_box {
width: 100%;
height: 350upx;
.info_child {
width: 90%;
height: 100%;
margin: 0 5%;
background-color: #fff;
border-radius: 20upx;
.info_child_child {
width: 90%;
height: 100%;
margin: 0 5%;
.notice {
width: 100%;
height: 100upx;
.notice_child {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20upx;
&>view:first-child {
width: 90upx;
height: 50upx;
background-color: #fdefe8;
display: flex;
align-items: center;
justify-content: center;
color: #dc7e48;
border-radius: 10upx;
font-weight: bold;
}
&>view:last-child {
color: #989898;
display: flex;
align-items: center;
.more_icon {
width: 30upx;
height: 30upx;
margin-left: 10upx;
}
}
}
}
.head_info_box {
width: 100%;
height: 240upx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom: 2upx solid #f7f7f7;
.head_info_item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&>view {
margin: 8upx 0;
}
&>view:first-child {
color: #979797;
font-size: 30upx;
}
&>view:nth-child(2) {
color: #222222;
font-size: 42upx;
font-weight: bold;
}
&>view:last-child {
display: flex;
align-items: center;
.increse_icon {
width: 40upx;
height: 40upx;
}
}
}
}
}
}
}
.head_user {
width: 100%;
height: 150upx;
position: relative;
.right_text {
width: 180upx;
height: 60upx;
background-color: #fef2f2;
display: flex;
align-items: center;
justify-content: center;
color: #dc4e4d;
position: absolute;
right: 0;
top: 40upx;
border-top-left-radius: 20upx;
border-bottom-left-radius: 20upx;
}
.user_left {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
padding-left: 30upx;
.user_icon {
width: 70upx;
height: 70upx;
border-radius: 100%;
margin-right: 10upx;
}
.user_text {
color: #1f1f1f;
font-weight: bold;
letter-spacing: 4upx;
}
}
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100upx;
position: sticky;
top: 0;
z-index: 99999 !important;
&>view {
flex: 1;
display: flex;
align-items: center;
}
&>view:first-child {
padding-left: 10upx;
}
&>view:nth-child(2) {
justify-content: center;
font-size: 38upx;
font-weight: bold;
}
&>view:last-child {
justify-content: flex-end;
padding-right: 20upx;
}
.head_icon {
width: 42upx;
height: 42upx;
}
.head_text {
font-size: 32upx;
font-weight: bold;
margin-left: 10upx;
}
}
}
</style>