实战派细节大师来袭！复刻头条创作中心精髓，打造非凡界面，拒绝华而不实，只留精品之作！

图148095-1：

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

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>   <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>   <view class="banner"></view>   <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>

来源：今日头条

作者：小林°

点赞：1

评论：0

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

原文：https://www.toutiao.com/article/7326851002395525642

侵权告知删除：yangzy187@126.com

转载请注明：网创网 www.netcyw.cn/b148095.html