uni-app 官方tabbar扩展、完全自定义

uni-app 官方tabbar扩展、完全自定义：https://ext.dcloud.net.cn/plugin?id=10343

<template>
    <view class="content">
        <view class="title">----本插件方法----</view>
        <button type="primary" @click="init1">初始化(效果1)</button>
        <button type="primary" @click="init2">初始化(效果2)</button>
        <button type="primary" @click="refresh">刷新tabbar</button>
        <view class="title">----官方方法----</view>
        <button type="primary" @click="visible">显示第2个</button>
        <button type="primary" @click="visible2">不显示第2个</button>
        <button type="primary" @click="showTabBar">显示tababr</button>
        <button type="primary" @click="hideTabBar">隐藏tababr</button>
        <button type="primary" @click="switchTab">切换</button>
    </view>
</template>

<script>
    const KJTabbar = uni.requireNativePlugin('KJ-Tabbar');
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            this.init1();
        },
        () {

        },
        methods: {
            init(dic) {
                /**
                 * 除了图标和文本，其它设置都引用官方的，比如tabbar的高度 pages.json -> tabBar -> "height": "60px"
                 * 必须要在 pages.json -> tabBar -> list 下配置 pagePath
                 * 参数说明：
                 * clickAnimation - 点击动画
                 *      isAnimation - 是否开启
                 *      animationTime - 动画时长
                 * list - tabbarItem配置
                 *  unselect - 没有选中时候的效果
                 *  select - 选中时候的效果
                 *      iconPath - 图标的绝对路径
                 *      iconWidth - 图标的宽度
                 *      iconHeight - 图标的高度
                 *      iconTop - 图标距离上边距离
                 *      color - 字体颜色 16进制
                 *      fontSize - 字体大小
                 *      fontWeight - 字体粗细 ios(-0.8 到 0.6) andorid(没有限制) 0-正常
                 *      text - 文本内容
                 *      textHeight - 文本高度
                 *      textTop - 文本距离图标距离
                 * */
                KJTabbar.init(dic, (res) => {
                    console.log("init:" + JSON.stringify(res))
                })
            },
            init1() {
                var dic = {
                    "clickAnimation": {
                        "isAnimation": true,
                        "animationTime": 200
                    },
                    "list": [{
                        "unselect": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/home.png"),
                            "iconWidth": 20,
                            "iconHeight": 20,
                            "iconTop": 10,
                            "color": "#7A7E83",
                            "fontSize": 10,
                            "fontWeight": "0",
                            "text": "首页",
                            "textHeight": 20,
                            "textTop": 0,
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/home_s.png"),
                            "iconWidth": 35,
                            "iconHeight": 35,
                            "iconTop": 10,
                            "color": "#008a00",
                            "fontSize": 15,
                            "fontWeight": "0.6",
                            "text": "",
                            "textHeight": 0,
                            "textTop": 0
                        }
                    }, {
                        "unselect": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/map.png"),
                            "iconWidth": 20,
                            "iconHeight": 20,
                            "iconTop": 10,
                            "color": "#7A7E83",
                            "fontSize": 10,
                            "fontWeight": "0",
                            "text": "页面2",
                            "textHeight": 20,
                            "textTop": 0
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/map_s.png"),
                            "iconWidth": 25,
                            "iconHeight": 25,
                            "iconTop": 10,
                            "color": "#008a00",
                            "fontSize": 13,
                            "fontWeight": "0.6",
                            "text": "页面2",
                            "textHeight": 25,
                            "textTop": 0
                        }
                    }, {
                        "unselect": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/set.png"),
                            "iconWidth": 20,
                            "iconHeight": 20,
                            "iconTop": 10,
                            "color": "#7A7E83",
                            "fontSize": 10,
                            "fontWeight": "0",
                            "text": "页面3",
                            "textHeight": 20,
                            "textTop": 0
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/set_s.png"),
                            "iconWidth": 25,
                            "iconHeight": 25,
                            "iconTop": 10,
                            "color": "#008a00",
                            "fontSize": 13,
                            "fontWeight": "0.6",
                            "text": "页面3",
                            "textHeight": 25,
                            "textTop": 0
                        }
                    }]
                }
                this.init(dic)
            },
            init2() {
                var dic = {
                    "clickAnimation": {
                        "isAnimation": true,
                        "animationTime": 200
                    },
                    "list": [{
                        "unselect": {
                            // "iconPath": plus.io.convertLocalFileSystemURL("static/home.png"),
                            // "iconWidth": 0,
                            // "iconHeight": 0,
                            // "iconTop": 0,
                            "color": "#7A7E83",
                            "fontSize": 25,
                            "fontWeight": "0",
                            "text": "首页",
                            "textHeight": 25,
                            "textTop": 10,
                        },
                        "select": {
                            // "iconPath": plus.io.convertLocalFileSystemURL("static/home_s.png"),
                            // "iconWidth": 0,
                            // "iconHeight": 0,
                            // "iconTop": 0,
                            "color": "#008a00",
                            "fontSize": 25,
                            "fontWeight": "0.6",
                            "text": "首页",
                            "textHeight": 25,
                            "textTop": 10
                        }
                    }, {
                        "unselect": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/map.png"),
                            "iconWidth": 35,
                            "iconHeight": 35,
                            "iconTop": 10,
                            // "color": "#7A7E83",
                            // "fontSize": 25,
                            // "fontWeight": "0",
                            // "text": "页面2",
                            // "textHeight": 25,
                            // "textTop": 10
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/map_s.png"),
                            "iconWidth": 35,
                            "iconHeight": 35,
                            "iconTop": 10,
                            // "color": "#008a00",
                            // "fontSize": 25,
                            // "fontWeight": "0.6",
                            // "text": "页面2",
                            // "textHeight": 25,
                            // "textTop": 10
                        }
                    }, {
                        "unselect": {
                            // "iconPath": plus.io.convertLocalFileSystemURL("static/set.png"),
                            // "iconWidth": 20,
                            // "iconHeight": 20,
                            // "iconTop": 10,
                            "color": "#7A7E83",
                            "fontSize": 25,
                            "fontWeight": "0",
                            "text": "页面3",
                            "textHeight": 25,
                            "textTop": 10
                        },
                        "select": {
                            // "iconPath": plus.io.convertLocalFileSystemURL("static/set_s.png"),
                            // "iconWidth": 25,
                            // "iconHeight": 25,
                            // "iconTop": 10,
                            "color": "#008a00",
                            "fontSize": 25,
                            "fontWeight": "0.6",
                            "text": "页面3",
                            "textHeight": 25,
                            "textTop": 10
                        }
                    }]
                }
                this.init(dic)
            },
            refresh() {
                /**
                 * 只要tabbar执行刷新动作，都要执行这个方法
                 * 比如：switchTab  visible 等等方法
                 * */
                KJTabbar.refresh({}, (res) => {
                    console.log("refresh:" + JSON.stringify(res))
                });
            },
            switchTab() {
                uni.switchTab({
                    url: "/pages/index/index2"
                })
                this.refresh();
            },
            showTabBar() {
                uni.showTabBar({
                    animation: true
                })
            },
            hideTabBar() {
                uni.hideTabBar({
                    animation: true
                })
            },
            visible() {
                uni.setTabBarItem({
                    index: 1,
                    visible: true
                })
                this.refresh();
            },
            visible2() {
                uni.setTabBarItem({
                    index: 1,
                    visible: false
                })
                this.refresh();
            }
        }
    }
</script>

<style>
    .title {
        text-align: center;
        margin-top: 8px;
        margin-bottom: 8px;
    }
</style>