{"id":167227,"date":"2020-10-11T06:45:01","date_gmt":"2020-10-10T22:45:01","guid":{"rendered":"http:\/\/4563.org\/?p=167227"},"modified":"2020-10-15T15:33:49","modified_gmt":"2020-10-15T07:33:49","slug":"nuxt-js-%e8%87%aa%e5%ae%9a%e4%b9%89-navbartabbar-%e7%bb%84%e4%bb%b6vue-%e4%bb%bf%e5%92%b8%e9%b1%bc-tab-%e5%87%b8%e8%b5%b7%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=167227","title":{"rendered":"Nuxt.js \u81ea\u5b9a\u4e49 Navbar+Tabbar \u7ec4\u4ef6|Vue \u4eff\u54b8\u9c7c Tab \u51f8\u8d77\u6548\u679c"},"content":{"rendered":"
\n
\n
\n

Nuxt.js \u81ea\u5b9a\u4e49 Navbar+Tabbar \u7ec4\u4ef6|Vue \u4eff\u54b8\u9c7c Tab \u51f8\u8d77\u6548\u679c <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : xiaoyan2017 <\/span> <\/i> 5<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u8bf4\u660e<\/h2>\n

\u8fd9\u6bb5\u65f6\u95f4\u90fd\u5fd9\u7740\u5f00\u53d1 Nuxt \u9879\u76ee\uff0c\u9274\u4e8e\u9879\u76ee\u4e2d\u9700\u8981\u7528\u5230\u9876\u90e8\u5bfc\u822a\u680f \/\u5e95\u90e8\u54b8\u9c7c\u6548\u679c Tab\uff0c\u4e8e\u662f\u5c31\u5b9a\u5236\u4e86\u8fd9\u4e2a\u529f\u80fd\u7ec4\u4ef6\u3002 Nuxt\/Vue \u81ea\u5b9a\u4e49 Navbar|Tabbar \u7ec4\u4ef6<\/p>\n

\"Nuxt.js<\/p>\n

\u5982\u4e0b\u56fe\uff1a\u9879\u76ee\u4e2d\u5b9e\u4f8b\u6548\u679c\u5c55\u793a<\/strong><\/p>\n

\"Nuxt.js<\/p>\n

okey\uff0c\u4e0b\u9762\u5c31\u7740\u91cd\u8bb2\u89e3\u4e0b\u5177\u4f53\u5b9e\u73b0\u8fc7\u7a0b\u3002<\/p>\n

\u9996\u5148\uff0c\u9700\u8981\u5728 components \u76ee\u5f55\u4e0b\u65b0\u5efa\u4e24\u4e2a headerBar.vue \u548c tabBar.vue \u9875\u9762\u3002<\/p>\n

\"Nuxt.js<\/p>\n

\u518d\u63a5\u7740\uff0c\u5728 plugins \u76ee\u5f55\u4e0b\u65b0\u5efa componentsInstall.js \u6587\u4ef6\u5e76\u5f15\u5165\u5373\u53ef\u3002<\/p>\n

\"Nuxt.js<\/p>\n

\u81ea\u5b9a\u4e49\u5bfc\u822a\u6761 headerBar.vue \u7ec4\u4ef6<\/h2>\n
<template>     <div class=\"header-bar\" :class=\"{'fixed': fixed, 'transparent fixed': transparent}\">         <div class=\"header-bar__wrap flexbox flex-alignc\" :style=\"{'background': bgcolor, 'color': color, 'z-index': zIndex}\">             <!-- >>\u8fd4\u56de -->             <div class=\"action hdbar-action__left isback\" v-if=\"back && back!='false'\" @click=\"$router.go(-1)\">                 <slot name=\"backIco\" \/><slot name=\"backText\" \/>             <\/div>               <!-- >>\u6807\u9898 -->             <div class=\"hdbar-title\" :class=\"{'center': center}\">                 <slot name=\"title\" \/>             <\/div>               <!-- >>\u641c\u7d22\u6846 -->             <div class=\"action hdbar-action__search\">                 <slot name=\"search\" \/>             <\/div>               <!-- >>\u53f3\u4fa7 -->             <div class=\"action hdbar-action__right\">                 <slot name=\"right\" \/>             <\/div>         <\/div>     <\/div> <\/template>  <script> \/**  * @Desc     Vue \u81ea\u5b9a\u4e49\u5bfc\u822a\u6761 headerBar  * @Time     andy by 2020-10-06  * @About    Q\uff1a282310962  wx\uff1axy190310  *\/     export default {         props: {             \/\/ \u662f\u5426\u8fd4\u56de             back: { type: [Boolean, String], default: true },             \/\/ \u6807\u9898             title: { type: String, default: '' },             \/\/ \u6807\u9898\u989c\u8272             color: { type: String, default: '#fff' },             \/\/ \u80cc\u666f\u989c\u8272             bgcolor: { type: String, default: '#22d59c' },             \/\/ \u6807\u9898\u662f\u5426\u5c45\u4e2d             center: { type: [Boolean, String], default: false },             \/\/ \u641c\u7d22\u6846             search: { type: [Boolean, String], default: false },             \/\/ \u662f\u5426\u56fa\u5b9a             fixed: { type: [Boolean, String], default: false },             \/\/ \u80cc\u666f\u900f\u660e             transparent: { type: [Boolean, String], default: false },             \/\/ \u8bbe\u7f6e\u5c42\u7ea7             zIndex: { type: [Number, String], default: '2021' },         },         data() {             return {}         },         methods: {},     } <\/script> <\/code><\/pre>\n
\"Nuxt.js<\/p>\n
\"Nuxt.js<\/p>\n
\"Nuxt.js<\/p>\n
<header-bar :back=\"true\" :bgcolor=\"linear-gradient(to right, #f726ff, #2acfff)\" color=\"#ff0\" center transparent>     <template #backIco><i class=\"iconfont icon-close\"><\/i><\/template>       <div slot=\"title\">     <img src=\"~\/assets\/img\/logo.png\" height=\"14\" \/> <em>Nuxt<\/em>     <\/div>       <div slot=\"right\" class=\"ml-20\" @click=\"$toast('\u641c\u7d22~~')\"><i class=\"iconfont icon-search\"><\/i><\/div>     <div slot=\"right\" class=\"ml-20\"><i class=\"iconfont icon-choose\"><\/i><\/div>     <div slot=\"right\" class=\"ml-20\"><van-button type=\"primary\" size=\"mini\" @click=\"saveData\">\u4fdd\u5b58<\/van-button><\/div> <\/header-bar> <\/code><\/pre>\n
\"Nuxt.js<\/p>\n
\"Nuxt.js<\/p>\n
<header-bar :back=\"true\" bgcolor=\"linear-gradient(to right, #6126ff, #ff21ee)\" color=\"#ff0\" center>     <div slot=\"backIco\"><i class=\"iconfont icon-close\"><\/i><\/div>     <div slot=\"search\" class=\"flex-c flex1\">         <input class=\"ipt flex1\" placeholder=\"\u641c\u7d22\u5173\u952e\u5b57...\" \/>     <\/div>     <div slot=\"right\" class=\"ml-30\"> <i class=\"iconfont icon-shoucang\"><\/i><\/div>     <div slot=\"right\" class=\"ml-30\"> <i class=\"iconfont icon-female\"><\/i><\/div> <\/header-bar> <\/code><\/pre>\n
\u81ea\u5b9a\u4e49 tabBar \u7ec4\u4ef6<\/h2>\n
\"Nuxt.js<\/p>\n
<template>     <div class=\"tab-bar\" :class=\"{'fixed': fixed}\">         <div class=\"tab-bar__wrap flexbox flex-alignc\" :style=\"{'background': bgcolor}\">             <div v-for=\"(item,index) in tabs\" :key=\"index\" class=\"navigator\" :class=\"currentTabIndex == index ? 'on' : ''\" @click=\"switchTabs(index, item)\">                 <div class=\"ico\" :class=\"{'dock': item.dock}\">                     <i v-if=\"item.dock\" class=\"dock-bg\" :style=\"{'background': item.dockBg ? item.dockBg : activeColor}\"><\/i>                     <i v-if=\"item.icon\" class=\"iconfont\" :class=\"item.icon\" :style=\"{'color': (currentTabIndex == index && !item.dock ? activeColor : color), 'font-size': item.iconSize}\"><\/i>                     <img v-if=\"item.iconImg\" class=\"iconimg\" :src=\"currentTabIndex == index && !item.dock ? item.selectedIconImg : item.iconImg\" :style=\"{'font-size': item.iconSize}\" \/>                     <em v-if=\"item.badge\" class=\"nuxt__badge\">{{item.badge}}<\/em>                     <em v-if=\"item.dot\" class=\"nuxt__badge-dot\"><\/em>                 <\/div>                 <div class=\"txt\" :style=\"{'color': (currentTabIndex == index ? activeColor : color)}\">{{item.text}}<\/div>             <\/div>         <\/div>     <\/div> <\/template> <\/code><\/pre>\n
<script>   export default {     props: {         current: { type: [Number, String], default: 0 },         \/\/ \u80cc\u666f\u989c\u8272         bgcolor: { type: String, default: '#fff' },         \/\/ \u989c\u8272         color: { type: String, default: '#999' },         \/\/ \u70b9\u51fb\u540e\u989c\u8272         activeColor: { type: String, default: '#22d59c' },         \/\/ \u662f\u5426\u56fa\u5b9a         fixed: { type: [Boolean, String], default: false },         \/\/ tab \u9009\u9879         tabs: {             type: Array,             default: () => null         }     },     data() {       return {           currentTabIndex: this.current       }     },     created() {         const _pagePath = this.$route.path         this.tabs.map((val, index) => {             if(val.pagePath == _pagePath) {                 this.currentTabIndex = index             }         })     },     methods: {         switchTabs(index, item) {             this.currentTabIndex = index             this.$emit('click', index)             if(item.pagePath) {                 this.$router.push(item.pagePath)             }         }     },   } <\/script> <\/code><\/pre>\n
\"Nuxt.js<\/p>\n
\"Nuxt.js<\/p>\n
<tab-bar bgcolor=\"#b6ffff\" @click=\"handleTabbar\" :tabs=\"[     {         icon: 'icon-tianjia',         text: 'Home',     },     {         icon: 'icon-shezhi',         text: 'Manage',         badge: 1     },     {         icon: 'icon-male',         text: 'Ucenter',         dot: true     },     ]\" \/> <\/code><\/pre>\n
\/\/ tabbar \u70b9\u51fb\u4e8b\u4ef6 handleTabbar(index) {     this.$toast('tabbar \u7d22\u5f15\u503c\uff1a' + index); }, <\/code><\/pre>\n
\u53e6\u5916\u8fd8\u652f\u6301\u81ea\u5b9a\u4e49 tab \u6570\u91cf\u53ca\u914d\u7f6e dock:true \u5373\u53ef\u5b9e\u73b0\u51f8\u8d77 tab \u6548\u679c\u3002<\/p>\n
\"Nuxt.js<\/p>\n
\"Nuxt.js<\/p>\n
<tab-bar bgcolor=\"#7fa1ff\" color=\"#fff\" activeColor=\"#fb4e30\" :tabs=\"[     {         icon: 'icon-face',         text: 'Face',         dot: true,         iconSize: '24px',     },     {         \/\/icon: 'icon-tianjia',         iconImg: 'https:\/\/gw.alicdn.com\/tfs\/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1',         text: '\u54b8\u9c7c',         dock: true,         dockBg: '#fb4e30',         iconSize: '.64rem',     },     {         icon: 'icon-search',         text: '\u641c\u7d22',     },     ]\" \/> <\/code><\/pre>\n
\u597d\u4e86\uff0c\u4f7f\u7528 Nuxt.js \u5b9e\u73b0\u81ea\u5b9a\u4e49 Tabbar+Navbar \u7ec4\u4ef6\u5c31\u5206\u4eab\u5230\u8fd9\u91cc\u3002\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01      <\/p><\/div>\n
 \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (0<\/span>)        <\/div>\n
 <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n","protected":false},"excerpt":{"rendered":"
    Nuxt.js \u81ea\u5b9a\u4e49 Navba…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/167227"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=167227"}],"version-history":[{"count":1,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/167227\/revisions"}],"predecessor-version":[{"id":167229,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/167227\/revisions\/167229"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=167227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=167227"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=167227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}