小程序自定义底部导航 custom-tab-bar

前言： 在开发小程序过程中，如果你需要根据不同用户角色显示不同底部导航；或者导航样式需要个性化设计。此时就需要用到自定义底部导航 custom-tab-bar。

具体操作：

1、根目录下创建custom-tab-bar目录

2、在app.json文件中配置导航信息

"tabBar": {"custom": true, // 开启自定义导航"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [ // 配置导航按钮信息 如果按条件显示不同按钮的话；这里一定要把所有的按钮全量的都配置上（比如当前示例中，登录前显示首页和我的两个按钮；登录后显示首页、工作台、我的三个按钮；在这里要把可能出现的按钮全部配置上）{"pagePath": "pages/home/index",  //页面路由"iconPath": "/img/icon_home_def.png", // 按钮图标"selectedIconPath": "/img/icon_navbar_homesel.png", // 选中时图标"text": "首页" // 按钮文字},{"pagePath": "pages/workbench/index","iconPath": "/img/icon_navbar_workdef.png","selectedIconPath": "/img/icon_navbar_worksel.png","text": "工作台"},{"pagePath": "pages/my/index","iconPath": "/img/icon_navbar_userdef.png","selectedIconPath": "/img/icon_navbar_usersel.png","text": "我的"}]
},

3、custom-tab-bar/index.wxml 文件内容

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

4、custom-tab-bar/index.js 文件内容

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#ff0000",list: []},attached() {this.setData({list: [{"pagePath": "/pages/home/index","iconPath": "/img/icon_home_def.png","selectedIconPath": "/img/icon_navbar_homesel.png","text": "首页"},{"pagePath": "/pages/my/index","iconPath": "/img/icon_navbar_userdef.png","selectedIconPath": "/img/icon_navbar_usersel.png","text": "我的"}]})},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.setData({selected: data.index})}}
})

5、custom-tab-bar/index. wxss文件内容

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;padding-top: 4px;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.tab-bar-item cover-image {width: 27px;height: 27px;
}.tab-bar-item cover-view {font-size: 10px;
}

6、导航跳转到的页面内

// 这样按钮才能正确显示选中效果
onShow(){if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 0})}
},

7.效果：

登录前：

登录后：

小程序自定义底部导航 custom-tab-bar相关推荐

微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
tabBar 自定义，小程序自定义底部导航栏
创建一个自定义组件 my_tab,组件代码在后面,先看调用自定义组件的代码,比如我需要在index 页面调用,就在index.json中引用组件,index.json 代码(引用的路径为你创建的自定义 ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
你会微信小程序自定义底部导航栏吗？
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...

小程序自定义底部导航 custom-tab-bar

具体操作：

1、根目录下创建custom-tab-bar目录

2、在app.json文件中配置导航信息

3、custom-tab-bar/index.wxml 文件内容

4、custom-tab-bar/index.js 文件内容

5、custom-tab-bar/index. wxss文件内容

6、导航跳转到的页面内

7.效果：

小程序自定义底部导航 custom-tab-bar相关推荐

最新文章

热门文章