更新记录

1.1.0（2022-12-07）

本次主要更新： 1.修改ios设置文本颜色无效

1.0.0（2022-12-06）

新版首发

平台兼容性

Android Android CPU类型 iOS
适用版本区间：4.4 - 12.0 armeabi-v7a：支持，arm64-v8a：支持，x86：支持 适用版本区间：11 - 16

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

KJ-Tabbar

官方tabbar扩展、完全自定义、点击带动画效果、可设置字体粗细、隐藏图标或文本、图标或文本大小、选中和未选中的样式等等

使用

<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',
                interval: null
            }
        },
        onShow() {},
        onLoad() {
            this.init1();
        },
        () {

        },
        methods: {
            init(dic) {
                /**
                 * 除了图标和文本，其它设置都引用官方的，比如tabbar的高度 pages.json -> tabBar -> "height": "60px"
                 * 必须要在 pages.json -> tabBar -> list 下配置 pagePath iconPath selectedIconPath text
                 * 参数说明：
                 * 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": 0,
                            "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": 30,
                            "textTop": 0,
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/home_s.png"),
                            "iconWidth": 0,
                            "iconHeight": 0,
                            "iconTop": 0,
                            "color": "#008a00",
                            "fontSize": 25,
                            "fontWeight": "0.6",
                            "text": "首页",
                            "textHeight": 30,
                            "textTop": 0
                        }
                    }, {
                        "unselect": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/map.png"),
                            "iconWidth": 35,
                            "iconHeight": 35,
                            "iconTop": 10,
                            "color": "#7A7E83",
                            "fontSize": 0,
                            "fontWeight": "0",
                            "text": "页面2",
                            "textHeight": 0,
                            "textTop": 0
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/map_s.png"),
                            "iconWidth": 35,
                            "iconHeight": 35,
                            "iconTop": 10,
                            "color": "#008a00",
                            "fontSize": 0,
                            "fontWeight": "0.6",
                            "text": "页面2",
                            "textHeight": 0,
                            "textTop": 0
                        }
                    }, {
                        "unselect": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/set.png"),
                            "iconWidth": 0,
                            "iconHeight": 0,
                            "iconTop": 0,
                            "color": "#7A7E83",
                            "fontSize": 25,
                            "fontWeight": "0",
                            "text": "页面3",
                            "textHeight": 30,
                            "textTop": 0
                        },
                        "select": {
                            "iconPath": plus.io.convertLocalFileSystemURL("static/set_s.png"),
                            "iconWidth": 0,
                            "iconHeight": 0,
                            "iconTop": 0,
                            "color": "#008a00",
                            "fontSize": 25,
                            "fontWeight": "0.6",
                            "text": "页面3",
                            "textHeight": 30,
                            "textTop": 0
                        }
                    }]
                }
                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>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...