前言

一个仿ios App的NavigationBar和TabBar布局,加自动轮播Banner。
环境

node 8.13
vue 2.6.9
vue-cli3
mac os 10.14.2

js依赖

主要实现组件

NavigationBar.vue
TabBar.vue
Swiper.vue

页面交互效果

先看gif效果图，觉得可以在去下面👇找源码。

生成的gif图不是很清晰，如果觉得有用，源码在这里。
vue-cli3 仿ios TabBar NavigationBar GitHub源码

代码使用

TabBar.vue
在App.vue引用组件的地方传入tabBarList数组
vue data定义tabBarList

data () {
    return {
      navBarOptions: {},
      tabBarList: [
        {
          text: '好运',
          path: '/',
          normalImg: require('./assets/images/tabbar/icon-good-luck-normal.png'),
          activeImg: require('./assets/images/tabbar/icon-good-luck-active.png')
        },
        {
          text: '码报',
          path: '/code-news',
          normalImg: require('./assets/images/tabbar/icon-code-news-normal.png'),
          activeImg: require('./assets/images/tabbar/icon-code-news-active.png')
        },
        {
          text: '发现',
          path: '/found',
          normalImg: require('./assets/images/tabbar/icon-found-normal.png'),
          activeImg: require('./assets/images/tabbar/icon-found-active.png')
        },
        {
          text: '我的',
          path: '/mine',
          normalImg: require('./assets/images/tabbar/icon-mine-normal.png'),
          activeImg: require('./assets/images/tabbar/icon-mine-active.png')
        }
      ]
    }
  }

在引用组件时传入tabBarList

1	<tab-bar :tabBarList="tabBarList"></tab-bar>

NavigationBar.vue
在各个页面上调取this.$emit(‘contentViewChang’, {})

传入导航栏上需要的数据

this.$emit('contentViewChang', {
      navBarOptions: {
        title: '好运',
        subTitle: '',
        leftItem: {
          icon: require('../assets/images/navbar/icon-download-app.png'),
          text: 'App',
          path: '/download-app'
        },
        rightItem: {
          icon: require('../assets/images/navbar/icon-hple-center.png'),
          text: '帮助',
          path: '/hple'
        }
      }
    })

经过 $emit 会把数据传入到App.vue在由App.vue把数据set给NavigationBar.vue的options根据各个页面回传的数据来决定渲染的Tiele和左右操作按钮。

1	<navigation-bar :options="navBarOptions"></navigation-bar>