Vue---hips UI---TabBar使用

一、基础用法-click

1. 自定义图标

(1) 用法

    <hips-tab-bar v-model="active">
    <hips-tab-bar-item dot>
        <span>Custom</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? icon.active : icon.normal"
        >
      </hips-tab-bar-item>
    </hips-tab-bar>
    --------------
    import iconPersonNormal from './assets/icon_person_normal@2x.png'
    import iconPersonActive from './assets/icon_person_press@2x.png'
    export default {
      data() {
        return {
          active: 0,
          icon: {
            normal: iconPersonNormal,
            active: iconPersonActive,
          },
        }
      }
    }

(2) 延伸的知识点：

作用域插槽：
--- 官方讲解的插槽相关知识：slot

2.点击底部tab栏页面切换

实现效果：

底部tab栏

(1) 方法一：
准备一个Footer组件，在每个页面引入Footer组件,传入iconActive的值，footer中根据iconActive的值控制点击状态,以及跳转到相应的页面。

Footer1
Footer1--data
home/index.vue

有个很奇妙的问题就是从左至右点击，页面反应正常，但是从右向左点击，会出现页面与tab选中样式不一致的情况？

问题.jpg
原因:
每个页面都有一个Footer组件,每个都是独立的,往右点击的时候在当前页面内footer状态已经改变了，也就是变成点击的那个，跳到别的页面以后用的是跳转后的页面的footer，如果有跳回来，展示的还是原先页面没有变化的footer，就出现了混乱。

解决：
one-----每个页面的Footer状态固定不变。

Footer2
（当然要另外写active和normal的样式）

two------抽离出来一个公共布局(方法二)。

(2)方法二：
利用动态组件，准备两种布局组件（其中一种有tab栏），布局组件内有一个插槽，供router-view组件使用，然后给路由添加meta属性，在app.vue判断这个属性，决定使用哪个布局组件。

无Footer的布局
有Footer的布局
使用动态组件
在路由中添加meta-layout属性
在app.vue做判断
这个时候Footer就可以还原成之前的亚子：
Footer3