微信小程序自定义tabBar样式，选中后中间凸起

效果预览

微信开发文档：自定义tabBar

一、配置信息

在 app.json 中的 tabBar 中指定 custom 字段为 true【允许使用自定义 tabBar】
在所有 tab 页 json 中申明usingComponents 项，或者在 app.json 中全局开启
在 list 中指定自己需要 tab

示例

"tabBar": {"custom": true,"color": "#515151","selectedColor": "#DAA520","backgroundColor": "#000000","list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/hospital/hospital","text": "医院"},{"pagePath": "pages/publish/publish","text": "item3"},{"pagePath": "pages/popularization/popularization","text": "科普"},{"pagePath": "pages/me/me","text": "我的"}]
},
"usingComponents": {},

二、添加 tabBar 代码文件

在代码根目录下添加custom-tab-bar文件夹，并在该文件夹下新建 page，文件结构如下

三、编写 tabBar 代码

wxml 代码

<!--custom-tab-bar/index.wxml-->
<view class="tab-bar"><view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><view  wx:if="item.bulge" class="tab-bar-bulge"></view><image class="image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><!-- <view  wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}" class="tab-bar-view">{{item.text}}</view> --><view  class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view></view>
</view>

js 代码

// custom-tab-bar/index.js
Component({data: {color: "#515151",selectedColor: "#DAA520",backgroundColor: "#ffffff",list: [{pagePath: "/pages/index/index",text: "首页",iconPath: "/images/tabbar/index.png",selectedIconPath: "/images/tabbar/index-selected.png"},{pagePath: "/pages/hospital/hospital",text: "医院",iconPath: "/images/tabbar/hospital.png",selectedIconPath: "/images/tabbar/hospital-selected.png"},{pagePath: "/pages/publish/publish",bulge:true,text: "发布",iconPath: "/images/tabbar/dog.png",selectedIconPath: "/images/tabbar/dog-selected.png"},{pagePath: "/pages/popularization/popularization",text: "科普",iconPath: "/images/tabbar/popularization.png",selectedIconPath: "/images/tabbar/popularization-selected.png"},{pagePath: "/pages/me/me",text: "我的",iconPath: "/images/tabbar/me.png",selectedIconPath: "/images/tabbar/me-selected.png"},]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url}) }}
})

wxss 代码

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 50px;background: #FFF;display: flex;line-height: 1.2;padding-bottom: env(safe-area-inset-bottom);border-top: 1px solid #e6e6e6;
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item .image {width: 26px;height: 26px;
}
.bulge {background-color: #FFF;
}
.bulge .tab-bar-bulge{position: absolute;z-index: -1;width: 64px;height: 64px;top: -24px;border-radius: 50%;border-top: 1px solid #e6e6e6;background-color: #FFF;
}
.bulge .image{position: absolute; width: 50px;height: 50px;top: -16px;
}
.bulge .tab-bar-view{position: relative;bottom: -16px;margin-top: 4px;
}.tab-bar-item .tab-bar-view {font-size: 12px;margin-top: 4px;
}

json 代码
```
{"component": true
}
```

四、配置 tab 页

在每一个 tab 页的onShow函数中写入下面的代码，其中 selected 的值为每个 tab 的索引

onShow: function () {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({// 首页为 0selected: 0})}
},

获取项目源代码

微信小程序自定义tabbar【中间凸起样式】相关推荐

微信小程序自定义tabbar中间凸起
在网上找了很多自定义tabbar的例子很多都是定义组件然后在需要tabbar的页面底部放置组件,这样导致页面加载的时候tabbar也会跟着重新加载网络卡顿是影响用户体验. 根据官方文档tabbar自定 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
微信小程序自定义tabbar底部菜单
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景. 在自定义 tabBar 模式下,为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配 ...
微信小程序自定义获取手机号按钮样式
微信小程序提供了获取手机号的方式,需要通过 open-type 为 getPhoneNumber 的按钮,然而基础的 button 组件有时候并不能满足我们的需求想要实现图中的自定义的按钮样式,有两 ...
微信小程序自定义tabBar以及图标-使用vant-weapp
小程序整合vant weapp可以看<微信小程序vant weapp安装与使用> 微信官方文档有介绍自定义tabBar 1.在小程序根目录下创建custom-tab-bar文件夹,并创建以 ...
微信小程序自定义tabbar、自定义导航、分包
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹,在该文件夹下创建组件自定义tabbar作为一个自定义组件进行构建.构建完毕后在app.json中的tabBar选项中配置cu ...
微信小程序自定义tabBar（实操）
文章目录一.前言二.固定效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json代码三.自定义效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json ...

微信小程序自定义tabbar【中间凸起样式】

微信小程序自定义tabBar样式，选中后中间凸起

一、配置信息

二、添加 tabBar 代码文件

三、编写 tabBar 代码

四、配置 tab 页

获取项目源代码

微信小程序自定义tabbar【中间凸起样式】相关推荐

最新文章

热门文章