uniapp 中间显示按钮

阴天678
858 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

最近碰到一个需求 需要在tabBar中间显示一个功能按钮 自然而然就想到了使用midButton， 中间按钮 仅在 list 项为偶数时有效

midButton 属性说明 属性类型必填默认值描述

属性              类型     必填  默认值  描述
width            String    否   80px  中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度 
height           String    否   50px  中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果 

text             String    否         中间按钮的文字 

iconPath         String    否         中间按钮的图片路径 

iconWidth        String    否   24px  图片宽度（高度等比例缩放） 

backgroundImage  String    否         中间按钮的背景图片路径 

iconfont         Object    否         字体图标，优先级高于 iconPath 

iconfont参数说明：
属性类型说明
属性            类型     描述
text           String   字库 Unicode 码 
selectedText   String   选中后字库 Unicode 码 
fontSize       String   字体图标字号(px) 
color          String   字体图标颜色 
selectedColor  String   字体图标选中颜色

按照官方文档上面的写法在页面上配置了之后 ，在H5的页面生效了

image.png

"midButton": {
        "width": "80px",
        "height": "50px",
        "text": "文字",
        "iconPath": "static/image/midButton_iconPath.png",
        "iconWidth": "24px",
        "backgroundImage": "static/image/midButton_backgroundImage.png"
}

midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑 使用 uni.onTabBarMidButtonTap 来做中间按钮的点击事件

uni.onTabBarMidButtonTap可以在APP.vue 的生命周期 onLaunch 中初始化 就可以点击跳转了 如以下

uni.onTabBarMidButtonTap(()=>{
    uni.navigateTo({
            url:"/pages/home/home"
    })
})

但是之后碰到了一个问题就是在APP的时候按钮不显示了 ，最后发现是原来是因为宽高用的rpx的原因最后换成px之后就正常显示了,一个小坑 给自己提个醒 记重点 宽高单位用 PX!PX!PX!

avatar
文章
阅读
粉丝