时间戳

首页 > 技术文章 > uniapp——tabbar中间凸起按钮

uniapp——tabbar中间凸起按钮

Console-LIJIE 2021-02-20 11:17 原文

pages.json中tabBar的配置

"tabBar": {
        "selectedColor":"#0c73fe",
        "color":"#ccc",
        "list": [
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/icon/home.png",
                "selectedIconPath":"static/icon/home_active.png"
            },
            {
                "text":"",
                "pagePath":"pages/project_moments/project_moments",
                "iconPath":"static/icon/moments.png",
                "selectedIconPath":"static/icon/moments_active.png"
            },
            {
                "text":"",
                "pagePath":"pages/project_data/project_data",
                "iconPath":"static/icon/data.png",
                "selectedIconPath":"static/icon/data_active.png"
            },
            {
                "text":"",
                "pagePath":"pages/personal_center/personal_center",
                "iconPath":"static/icon/my.png",
                "selectedIconPath":"static/icon/my_active.png"
            }
        ],
        "midButton": {
            "width": "60px",
            "height": "60px",
            "iconPath": "static/icon/pic.png",
            "iconWidth": "55px"
        }
    }

midButton的节点配置是不包含在tabBar中的，所以中间按钮 仅在 list 项为偶数时有效

重点突起按钮的点击事件监听

因为中间按钮是没有对应的page页面的，所以将这个监听注册在App.vue中比较合适

<script>
    export default {
        onLaunch: function() {
            // tabbar中间按钮点击事件
            uni.onTabBarMidButtonTap(function(e){
                uni.showToast({
                    title:'点我干嘛',
                    duration: 1500,
                    icon:'none'
                });
            })
        },
    }
</script>

 

推荐阅读