您的位置:首页 > 健康 > 养生 > 画册制作_建筑八大员报名网站_十大接单平台_软考培训机构哪家好一点

画册制作_建筑八大员报名网站_十大接单平台_软考培训机构哪家好一点

2024/12/23 7:29:13 来源:https://blog.csdn.net/halo1416/article/details/143676598  浏览:    关键词:画册制作_建筑八大员报名网站_十大接单平台_软考培训机构哪家好一点
画册制作_建筑八大员报名网站_十大接单平台_软考培训机构哪家好一点

一、前言

最近写基于uni-app 写app项目的时候,底部导航栏 中间有一个固定的大图标,并且没有激活状态。这里记录下实现方案。效果如下(党组织这个图标):
在这里插入图片描述

方法一:midButton的使用

官方文档:tabber配置
在这里插入图片描述

注意: midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap;

配置方法
1. page.json
{
// ...其他配置
"tabBar": {"color": "#808080","selectedColor": "#F0222C","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "static/images/tabbar/home.png","selectedIconPath": "static/images/tabbar/home_active.png","text": "我的"},{"pagePath": "pages/study/index","iconPath": "static/images/tabbar/study.png","selectedIconPath": "static/images/tabbar/study_active.png","text": "学习"},{"pagePath": "pages/dangwu/index","iconPath": "static/images/tabbar/dangwu.png","selectedIconPath": "static/images/tabbar/dangwu_active.png","text": "党务"},{"pagePath": "pages/mine/index","iconPath": "static/images/tabbar/mine_active.png","selectedIconPath": "static/images/tabbar/mine.png","text": "我的"}],"midButton": {// 调整这里面的width、height、iconWidth 就可以实现图标位置、大小的调整"width": "60px","height": "72px","iconWidth": "50px","iconPath": "static/images/tabbar/dangzuzhi.png","text": "党组织"}}
}
2. 监听事件病自定义导航 App.vue
onLaunch: function() {console.log('App Launch')// 监听底部tabbar 中间按钮“党组织”,跳转对应的页面uni.onTabBarMidButtonTap(() => {uni.navigateTo({url: '/pages/dangzuzhi/index',});})
}

注意: 该方法跳转后是进入二级页面,底部导航栏会消失,顶部会有返回按钮。适应于新增类型的页面。

方法二:iconfont 的使用

在这里插入图片描述

使用方法:在 tabbar 里面配置 iconfontSrc 属性(字体文件),然后在 list 数组里面,在想要的tab使用 iconfont 代替 iconPath 。如下:

"tabBar": {"color": "#808080","selectedColor": "#F0222C","borderStyle": "black","backgroundColor": "#ffffff","iconfontSrc": "static/font/iconfont.ttf","list": [{"pagePath": "pages/index/index","iconPath": "static/images/tabbar/home.png","selectedIconPath": "static/images/tabbar/home_active.png","text": "我的"},{"pagePath": "pages/study/index","iconPath": "static/images/tabbar/study.png","selectedIconPath": "static/images/tabbar/study_active.png","text": "学习"},{"pagePath": "pages/dangzuzhi/index","text": "党组织","iconfont": { // 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc// 此处需要注意,从阿里巴巴图标库中复制下来的图标代码是,需要将&#xe转换为\ue"text": "\ue750","selectedText": "\ue750","fontSize": "22px","color": "#808080","selectedColor": "#F0222C"}},{"pagePath": "pages/dangwu/index","iconPath": "static/images/tabbar/dangwu.png","selectedIconPath": "static/images/tabbar/dangwu_active.png","text": "党务"},{"pagePath": "pages/mine/index","iconPath": "static/images/tabbar/mine_active.png","selectedIconPath": "static/images/tabbar/mine.png","text": "我的"}]}

此时,icon 能显示出来了,但可能样式还有点不符合我们的需求,我们可以在全局样式问题 uni.scss 进行调整:

.uni-tabbar-bottom .uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__icon {width: 46px !important;height: 46px !important;color: #fff;background: linear-gradient(45deg, #F0222C, #FF8F2C);border-radius: 50%;position: relative;top: -20px;left: 0px;margin-bottom: -20px;.uni-tabbar__iconfont {width: 46px;height: 46px;position: relative;top: 10px;}
}

注意:这样调整了样式,在H5端显示是正常的,但 App 端 表现可能不尽人意,修改的样式不生效(因为有兼容性的问题)。
在这里插入图片描述

方法三、折中方案(解决)

折中方案还是基于 midButton ,官方问题有这么一句话:midButton 中间按钮 仅在 list 项为偶数时有效。而 list 数组里面有这个一个属性 visible:该项是否显示,默认显示
 
所以,我添加了两个不显示的 tabbar (设置visible为false);然后设置 midButton 配置大图标即可。
 
但是:请注意,tab 的列表,详见 list 属性说明,最少2个、最多5个 tab;添加了两个不可见的tab后,就有6个了。但目前看来还是没啥问题!!

 
 
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com