小程序底部导航栏配置以及自定义导航栏

小程序底部导航栏可在根目录下的 app.json 文件进行全局配置，但是部分情况下需要我们自己进行自定义。

** 一：在app.json 文件进行全局配置**

{"pages": ["pages/index/index","pages/classify/classify","pages/cart/cart","pages/mine/mine",],"window": {"navigationBarTitleText": "Demo"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/iconfont-home.jpg","selectedIconPath": "images/iconfont-home-active.jpg"},{"pagePath": "pages/classify/classify","text": "分类","iconPath": "images/iconfont-classify.jpg","selectedIconPath": "images/iconfont-classify-active.jpg"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "images/iconfont-cart.jpg","selectedIconPath": "images/iconfont-cart-active.jpg"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "images/iconfont-my.jpg","selectedIconPath": "images/iconfont-my-active.jpg"}]},"sitemapLocation": "sitemap.json"
}

效果如下图展示

说明

** 二：自定义底部导航栏**

view代码如下：

 <view class="wtx_nav"><navigator hover-class="none" class="wtx_nav_item" url="/pages/xiamen/xiamen"><image src="../../images/iconxiamen.png" class="iconfont"></image><view style="color:#004098;">厦门</view></navigator><navigator hover-class="none" class="wtx_nav_item" url="/pages/quanzhou/quanzhou"><image src="../../images/iconquanzhou.png" class="iconfont"></image><view style="color:#e86704;">泉州</view></navigator><navigator hover-class="none" class="wtx_nav_item" url="/pages/zhangzhou/zhangzhou"><image src="../../images/iconzhangzhou.png" class="iconfont"></image><view style="color:#ae3da1;">漳州</view></navigator><navigator hover-class="none" class="wtx_nav_item" url="/pages/longyan/longyan"><image src="../../images/iconlongyan.png" class="iconfont" ></image><view style="color:#4d02ae;">龙岩</view></navigator><navigator hover-class="none" class="wtx_nav_item" url="/pages/sanming/sanming"><image src="../../images/iconsanming.png" class="iconfont" ></image><view style="color:#51a368;">三明</view></navigator><navigator hover-class="none" class="wtx_nav_item" url="/pages/buy/buy"><image src="../../images/iconbug.png" class="iconfont" ></image><view style="color:#69500d;">购买</view></navigator></view>

wxss代码如下：

/* 底部导航 */
.wtx_nav {position: fixed;bottom: 0;left: 0;right: 0;z-index: 2;background: #fff;border-top: 1px solid rgba(0, 0, 0, 0.1);display: flex;margin-top: 20px;padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);
}.wtx_nav_item {flex: 1;text-align: center;font-size: 24rpx;line-height: 1;padding: 12rpx 0 26rpx;color: #afb2bc;
}.wtx_nav_item .iconfont {height: 50px;width: 50px;display: block;margin: auto;
}

效果如下图展示

说明
在 navigator 处添加 url 入径即可。

总结

小程序自带的 tabBar 不得超过五个，所以在超过五个的情况下可以采用自定义导航栏进行开发。

小程序底部导航栏配置以及自定义导航栏相关推荐

【微信小程序开发（二）】自定义导航栏
1 设置小程序通栏,不展示标题导航每个页面都有自己的json文件配置,如下index.json文件, 他们会覆盖掉app.json已有的配置项通栏的设置主要是 "navigationSt ...
php底部导航栏,关于微信小程序底部导航栏目的开发
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下微信小程序底部导航栏目 ...
微信小程序生态13-微信公众号自定义菜单、个性化菜单配置
文章导航微信小程序生态1-初识小程序微信小程序生态2-创建一个微信小程序微信小程序生态3-微信小程序登录流程设计微信小程序生态4-扫普通二维码进入小程序.打开短链接进入小程序微信小程序生态5 ...
aos动画库反向播放，pdf复制出现乱码，微信小程序底部栏联系客服
少小多才学,平生志气高.别人怀宝剑,我有笔如刀. 记录一些遇到的问题- 本文大概3000字,阅读大概需要9分钟 ** 本文目录一.pdf复制出现乱码问号问题二.aos动画库反向播放问题三.微信 ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
用mpx框架自定义小程序底部tabbar
小程序[mpx] 用mpx框架自定义小程序底部tabbar 参考小程序官方文档:自定义 tabBar. 1.项目根目录下app.mpx** 1).添加"custom":" ...
解决小程序底部导航在iphone x及以上机型上安全区域的适配问题@令狐张豪
问题点:小程序底部导航如果写固定的位置在安卓系统上是没有问题的,但是在iPhone X及以上机型有安全区域的机器上就显得有点太靠下了,我们可以写成动态的: 解决思路:判断是Android 还是 iOS ...
02-微信小程序开发-模板与配置
一.WXML 模板语法 1.1.数据绑定 1. 数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 // pages/list/list.js Page({/*** 页面的 ...

小程序底部导航栏配置以及自定义导航栏

小程序底部导航栏配置以及自定义导航栏相关推荐

最新文章

热门文章