区块链技术博客
www.b2bchain.cn

首页顶部标签栏求职学习资料

D0b2wT.gif

本文介绍了首页顶部标签栏求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

前言

我们观察抖音APP 可以发现首页、朋友页面,在页面顶部都有一个标签栏,标签栏由三部分组成如图:
首页顶部标签栏
所以我们创建的顶部TopBar由两部分组成

  • TopBarItem :标签栏的菜单项
  • Topbar :标签栏
    • 标签栏左侧按钮的图标 使用的是阿里图标字体 点击左侧按钮 跳转到直播页面 (此功能 放在最后的章节去实现)
    • 标签栏按钮右侧的图标 使用的是阿里图标字体 点击右侧按钮 跳转到查询页面 (查询页面 放在最后的章节去实现)

通过App分析页面结构(如下图),

  • 决定首页采用嵌套路由,既路由规则为:home -> index -> follows | recommend,follows、recommend作为index的子路由,而index又做为home的子路由
    首页顶部标签栏

  • 嵌套路由里边的子路由千万不要写成’/follows’ ,因为写成’/follows’ 浏览器会认为是根路径跳转,而不是子路由了。

修改路由

import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue';  Vue.use(VueRouter);  const routes = [   {     path: '/',     redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏   },   {     path: '/index',     redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏   },   {     path: '/',     name: 'Home',     component: Home,     children: [       {         path: '/index',         name: 'index',         component: () => import(/* webpackChunkName: "index" */ '../views/index/Index.vue'),         children: [           {             path: 'follows', // 关注             name: 'follows',             component: () => import(/* webpackChunkName: "Follows" */ '../views/follow/Follows.vue'),             children: [               {                 path: 'reVidelList',                 name: 'reVidelList',                 component: () => import(/* webpackChunkName: "reVidelList" */ '../components/index/VideoList.vue'),               },             ],           },           {             path: 'recommend', // 推荐             name: 'recommend',             component: () => import(/* webpackChunkName: "Recommend" */ '../views/recommend/Recommend.vue'),             children: [               {                 path: 'reVidelList',                 name: 'reVidelList',                 component: () => import(/* webpackChunkName: "reVidelList" */ '../components/index/VideoList.vue'),               },             ],           },         ],       },       {         path: '/friends',         name: 'friends',         component: () => import(/* webpackChunkName: "fllow" */ '../views/friends/Friends.vue'),         children: [           {             path: '/friends',             name: 'friends',             component: () => import(/* webpackChunkName: "videoList" */ '../components/index/VideoList.vue'),           },         ],       },       {         path: '/msg',         name: 'msg',         component: () => import(/* webpackChunkName: "msg" */ '../views/message/Message.vue'),       },       {         path: '/me',         name: 'me',         component: () => import(/* webpackChunkName: "me" */ '../views/me/Me.vue'),       },     ],   },   {     path: '/publish',     name: 'publish',     component: () => import(/* webpackChunkName: "publish" */ '../views/publish/Publish.vue'),   },   // {   //   path: '/sign',   //   name: 'Sign',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/Sign'),   // },   // {   //   path: '/tpsign',   //   name: 'TPSign',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/TPSign'),   // },   // {   //   path: '/code',   //   name: 'Code',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/Code'),   // },   // {   //   path: '/edit',   //   name: 'edit',   //   component: () => import(/* webpackChunkName: "edit" */ '../views/me/Edit.vue'),   // },  ];  const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes, });  export default router;

创建Topbar组件

在src->components文件夹下创建如下目录,并创建vue文件
首页顶部标签栏

TopBarItem.vue

实现思路

  • 我们可以使用v-modal 这个技巧来 执行某段css只在特定条件下才显示的需求
  • router-link 默认会渲染成a标签 所以我们需要将router-link渲染成div标签
  • 利用计算属性 isActive 实现标签选中 高亮效果
    “` javascript

前言

我们观察抖音APP 可以发现首页、朋友页面,在页面顶部都有一个标签栏,标签栏由三部分组成如图:
首页顶部标签栏
所以我们创建的顶部TopBar由两部分组成

  • TopBarItem :标签栏的菜单项
  • Topbar :标签栏
    • 标签栏左侧按钮的图标 使用的是阿里图标字体 点击左侧按钮 跳转到直播页面 (此功能 放在最后的章节去实现)
    • 标签栏按钮右侧的图标 使用的是阿里图标字体 点击右侧按钮 跳转到查询页面 (查询页面 放在最后的章节去实现)

通过App分析页面结构(如下图),

  • 决定首页采用嵌套路由,既路由规则为:home -> index -> follows | recommend,follows、recommend作为index的子路由,而index又做为home的子路由
    首页顶部标签栏

  • 嵌套路由里边的子路由千万不要写成’/follows’ ,因为写成’/follows’ 浏览器会认为是根路径跳转,而不是子路由了。

修改路由

import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue';  Vue.use(VueRouter);  const routes = [   {     path: '/',     redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏   },   {     path: '/index',     redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏   },   {     path: '/',     name: 'Home',     component: Home,     children: [       {         path: '/index',         name: 'index',         component: () => import(/* webpackChunkName: "index" */ '../views/index/Index.vue'),         children: [           {             path: 'follows', // 关注             name: 'follows',             component: () => import(/* webpackChunkName: "Follows" */ '../views/follow/Follows.vue'),             children: [               {                 path: 'reVidelList',                 name: 'reVidelList',                 component: () => import(/* webpackChunkName: "reVidelList" */ '../components/index/VideoList.vue'),               },             ],           },           {             path: 'recommend', // 推荐             name: 'recommend',             component: () => import(/* webpackChunkName: "Recommend" */ '../views/recommend/Recommend.vue'),             children: [               {                 path: 'reVidelList',                 name: 'reVidelList',                 component: () => import(/* webpackChunkName: "reVidelList" */ '../components/index/VideoList.vue'),               },             ],           },         ],       },       {         path: '/friends',         name: 'friends',         component: () => import(/* webpackChunkName: "fllow" */ '../views/friends/Friends.vue'),         children: [           {             path: '/friends',             name: 'friends',             component: () => import(/* webpackChunkName: "videoList" */ '../components/index/VideoList.vue'),           },         ],       },       {         path: '/msg',         name: 'msg',         component: () => import(/* webpackChunkName: "msg" */ '../views/message/Message.vue'),       },       {         path: '/me',         name: 'me',         component: () => import(/* webpackChunkName: "me" */ '../views/me/Me.vue'),       },     ],   },   {     path: '/publish',     name: 'publish',     component: () => import(/* webpackChunkName: "publish" */ '../views/publish/Publish.vue'),   },   // {   //   path: '/sign',   //   name: 'Sign',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/Sign'),   // },   // {   //   path: '/tpsign',   //   name: 'TPSign',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/TPSign'),   // },   // {   //   path: '/code',   //   name: 'Code',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/Code'),   // },   // {   //   path: '/edit',   //   name: 'edit',   //   component: () => import(/* webpackChunkName: "edit" */ '../views/me/Edit.vue'),   // },  ];  const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes, });  export default router;

创建Topbar组件

在src->components文件夹下创建如下目录,并创建vue文件
首页顶部标签栏

TopBarItem.vue

实现思路

  • 我们可以使用v-modal 这个技巧来 执行某段css只在特定条件下才显示的需求
  • router-link 默认会渲染成a标签 所以我们需要将router-link渲染成div标签
  • 利用计算属性 isActive 实现标签选中 高亮效果
    “` javascript

前言

我们观察抖音APP 可以发现首页、朋友页面,在页面顶部都有一个标签栏,标签栏由三部分组成如图:
首页顶部标签栏
所以我们创建的顶部TopBar由两部分组成

  • TopBarItem :标签栏的菜单项
  • Topbar :标签栏
    • 标签栏左侧按钮的图标 使用的是阿里图标字体 点击左侧按钮 跳转到直播页面 (此功能 放在最后的章节去实现)
    • 标签栏按钮右侧的图标 使用的是阿里图标字体 点击右侧按钮 跳转到查询页面 (查询页面 放在最后的章节去实现)

通过App分析页面结构(如下图),

  • 决定首页采用嵌套路由,既路由规则为:home -> index -> follows | recommend,follows、recommend作为index的子路由,而index又做为home的子路由
    首页顶部标签栏

  • 嵌套路由里边的子路由千万不要写成’/follows’ ,因为写成’/follows’ 浏览器会认为是根路径跳转,而不是子路由了。

修改路由

import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue';  Vue.use(VueRouter);  const routes = [   {     path: '/',     redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏   },   {     path: '/index',     redirect: '/index/recommend/', // app打开之后 默认跳转到首页的推荐标签栏   },   {     path: '/',     name: 'Home',     component: Home,     children: [       {         path: '/index',         name: 'index',         component: () => import(/* webpackChunkName: "index" */ '../views/index/Index.vue'),         children: [           {             path: 'follows', // 关注             name: 'follows',             component: () => import(/* webpackChunkName: "Follows" */ '../views/follow/Follows.vue'),             children: [               {                 path: 'reVidelList',                 name: 'reVidelList',                 component: () => import(/* webpackChunkName: "reVidelList" */ '../components/index/VideoList.vue'),               },             ],           },           {             path: 'recommend', // 推荐             name: 'recommend',             component: () => import(/* webpackChunkName: "Recommend" */ '../views/recommend/Recommend.vue'),             children: [               {                 path: 'reVidelList',                 name: 'reVidelList',                 component: () => import(/* webpackChunkName: "reVidelList" */ '../components/index/VideoList.vue'),               },             ],           },         ],       },       {         path: '/friends',         name: 'friends',         component: () => import(/* webpackChunkName: "fllow" */ '../views/friends/Friends.vue'),         children: [           {             path: '/friends',             name: 'friends',             component: () => import(/* webpackChunkName: "videoList" */ '../components/index/VideoList.vue'),           },         ],       },       {         path: '/msg',         name: 'msg',         component: () => import(/* webpackChunkName: "msg" */ '../views/message/Message.vue'),       },       {         path: '/me',         name: 'me',         component: () => import(/* webpackChunkName: "me" */ '../views/me/Me.vue'),       },     ],   },   {     path: '/publish',     name: 'publish',     component: () => import(/* webpackChunkName: "publish" */ '../views/publish/Publish.vue'),   },   // {   //   path: '/sign',   //   name: 'Sign',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/Sign'),   // },   // {   //   path: '/tpsign',   //   name: 'TPSign',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/TPSign'),   // },   // {   //   path: '/code',   //   name: 'Code',   //   component: () => import(/* webpackChunkName: "sign" */ '../views/Code'),   // },   // {   //   path: '/edit',   //   name: 'edit',   //   component: () => import(/* webpackChunkName: "edit" */ '../views/me/Edit.vue'),   // },  ];  const router = new VueRouter({   mode: 'history',   base: process.env.BASE_URL,   routes, });  export default router;

创建Topbar组件

在src->components文件夹下创建如下目录,并创建vue文件
首页顶部标签栏

TopBarItem.vue

实现思路

  • 我们可以使用v-modal 这个技巧来 执行某段css只在特定条件下才显示的需求
  • router-link 默认会渲染成a标签 所以我们需要将router-link渲染成div标签
  • 利用计算属性 isActive 实现标签选中 高亮效果
    “` javascript

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 首页顶部标签栏求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们