vux Tabbar組件入門備忘大佬多指點

一、Tabbar引入及使用

1、新創建vue文件

2、在vue文件中添加插件

<template>

<div>

<tabbar style="position:fixed">

<tabbar-item selected >

<img slot="icon" src=" ../src/images/home1.png">

<img slot="icon-active" src=" ../src/images/home.png">

<span slot="label">首頁</span>

</tabbar-item >

<tabbar-item link="#">

<img slot="icon" src=" ../src/images/home1.png">

<img slot="icon-active" src=" ../src/images/home.png">

<span slot="label">首頁</span>

</tabbar-item>

<tabbar-item link="#">

<img slot="icon" src=" ../src/images/home1.png">

<img slot="icon-active" src=" ../src/images/home.png">

<span slot="label">首頁</span>

</tabbar-item>

<tabbar-item link="#">

<img slot="icon" src=" ../src/images/home1.png">

<img slot="icon-active" src=" ../src/images/home.png">

<span slot="label">首頁</span>

</tabbar-item>

</tabbar>

</div>

</template>

3.引入插件

<script>

import { Tabbar, TabbarItem } from 'vux'

export default {

components: {

Tabbar,

TabbarItem

}

}

</script>

二、注意事項

1、默認定位為 absolute，適用於 100%頁面布局，如果你並非 100% 布局(可以配合使用 view-box 組件)，請手動重置樣式為 position: fixed

2、tabbar默認切換顏色為綠色如需要修改 

2.1、先修改build文件夾下webpack.base.conf.js文件

2.2、按照自己的路徑創建vux_theme.less樣式文件並添加樣式

@tabbar-text-active-color: #f592c2;

3、改變選中圖片為

<img slot="icon-active" src=" ../src/images/home.png">

三、最終效果