小程序自定义菜单Navbar

前言：采用模板template格式进行自定义所需要的菜单，以及可以根据不同的需求在同一个小程序中显示不一样的菜单navbar

效果对比图：

效果对比图

1.定义Navbar格式（在根目录下新增一个.wxml文件）

<template name="navbar"><view class="tabBar_box" style="background-color:{{tabBar.backgroundColor}}; {{tabBar.position == 'top' ? 'top:0' : 'bottom:0'}}；position:fixed;bottom:0;"><block wx:for="{{tabBar.list}}" wx:for-item="item" wx:key="nav"><navigator class="tabBar_nav" url="{{item.pagePath}}" style="width:{{1/tabBar.list.length*100}}%; " open-type="redirect" bindtap="changeTabBar"><image class="tabBar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image><text style="color:{{item.selected ? tabBar.selectedColor : tabBar.color}}">{{item.text}}</text></navigator></block></view>
</template>

2.对navbar可进行自定义样式（因为小程序全部页面都会用到，所以可在app.wxss中定义navbar样式）

.tabBar_box{display: flex;flex-direction: row;justify-content: space-around;position: fixed;bottom: 0;left: 0;z-index: 999;width: 100%;height: 120rpx;border-top: 1rpx solid #d7d7d7;
}.tabBar_nav{display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 28rpx;height: 100%;
}.tabBar_icon{width: 50rpx;height:50rpx;
}

3.对于navbar菜单所显示的只以及相关图标信息值的配置可在全局app.js中进行初始化定义

 tabBar: {selectedColor: "#0592E4",list: [{pagePath: "/pages/List/List",text: "分润详情",iconPath: "/pages/image/Detail01.png",selectedIconPath: "/pages/image/Detail02.png",selected: true},{pagePath: "/pages/Spread/Spread",text: "推广管理",iconPath: "/pages/image/tuig01.png",selectedIconPath: "/pages/image/tuig02.png",selected: false},{pagePath: "/pages/Settlement/Settlement",text: "结算管理",iconPath: "/pages/image/Settl01.png",selectedIconPath: "/pages/image/Settl02.png",selected: false},{pagePath: "/pages/Account/Account",text: "账户信息",iconPath: "/pages/image/me21.png",selectedIconPath: "/pages/image/me22.png",selected: false}],position: "bottom"}

对于navbar相关数据初始化的定义就基本已经完成，接下来就是要引用模板

<import src="../../navbar.wxml" />
<template is="navbar" data="{{tabBar}}"/>

【对于模板的引用有一点注意事项，

在定义模板时，<template name="navbar"></template>,

引用时 <template is="navbar" data="{{tabBar}}"/>

具体相关文档参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html】

在每一个navbar所指向的页面中，都需要定义赋值，否则该页面初始化时无法读取到数据

Page({/*** 页面的初始数据*/data: {tabBar: app.globalData.tabBar,},
});

采用template模板定义菜单已基本完成；

但还有一些动态操作功能需要实现

其一：点击菜单进行页面跳转时，该图标切换为selectIconpath中路径的图标，selected：false也未更改

解决办法：需要在点击文字图标时增加一个bindtap事件

changeTabBar

 /*** navbar菜单导航切换事件*/changeTabBar: function () {var that = this;var _curPageArr = getCurrentPages();var _curPage = _curPageArr[_curPageArr.length - 1];var _pagePath = _curPage.__route__;if (_pagePath.indexOf('/') != 0) {_pagePath = '/' + _pagePath;}var tabBar = app.globalData.tabBar;console.log(tabBar);for (var i = 0; i < tabBar.list.length; i++) {tabBar.list[i].selected = false;if (tabBar.list[i].pagePath == _pagePath) {tabBar.list[i].selected = true;//根据页面地址设置当前页面状态  }}that.setData({tabBar: tabBar});},

【注意if之后一定要重新赋值setData，因为页面加载是会读取page-data中的数据，

虽然在if条件中进行判断当前页面以及进行修改selected值，但是并未进行赋值，所以会出现selecticonPath无效的情况】

其二：使用模板template自定义菜单是因为比较灵活，如果采用微信小程序自身定义，无法进行灵活，或者可应用与菜单只有一种情况下。我才用自定义template定义菜单是因为我会出现两种不一样的菜单导航

解决办法：可提前判断当前登录人的身份并且进行选择相应的菜单导航值，或者删除之后重新定义赋值

 /**
* 根据登录人身份进行显示navbar
* 1  团队经销商;0-个人经销商
*/navbar: function () {var that = this;var type = app.globalData.userInfo.ChannelTypevar tabBar = app.globalData.tabBar;if (type == 0) {console.log("个人");for (var i = 0; i < tabBar.list.length; i++) {if (tabBar.list[i].text == "结算管理") {tabBar.list.splice(i, 1);//根据页面地址设置当前页面状态  console.log(tabBar.list[i].text == "结算管理");that.setData({tabBar: app.globalData.tabBar});}}that.setData({tabBar: app.globalData.tabBar});}},

【因为登录之后就需要显示相应的菜单，所以需要在页面加载时去执行该方法】

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that=this;that.navbar();    },

自定义菜单功能基本已实现，

【如有不正确的地方或者不恰当的地方还请指出，谢谢！】

小程序自定义菜单Navbar相关推荐

微信小程序自定义菜单tabbar后初次进入小程序会出现两个tabbar
微信小程序自定义tabbar后,初次进去小程序会出现aap.json中配置的tabbar同时也会出现自定义的tabbar,当关闭小程序在此进入就好了只显示自定义tabbar 解决办法就是在小程序初次进 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
小程序自定义导航栏返回主页
小程序自定义导航栏返回主页效果图在app.js中获取状态栏的高度statusBarHeight 自定义组件navbar.wxml 自定义组件navbar.wxss 自定义组件navbar.json ...
小程序自定义搜索框_将自定义搜索提供程序添加到Windows 7以及高级搜索技巧
小程序自定义搜索框 Disclaimer: Many of my tips have crashed cars, broken lights, and caused lawnmowers to go ...
小程序导航栏透明，精准设置小程序自定义标题的高度和定位
这里写自定义目录标题场景设置页面标题栏为自定义模式一些概念 - 重点解决方案详细代码 util.js 主页面自定义标题栏组件场景常见场景为ui小姐姐为页面顶部设计了漂亮的图片例如我们的 ...
小程序自定义导航栏 navigationStyle
小程序自定义导航栏微信提供自定义导航栏说明开始自定义导航栏组件微信提供自定义导航栏说明微信版本 6.60 window下的 navigationStyle 属性,设置为 custom 即可关闭 ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序自定义navigationbar与下拉刷新思考
第一次开发小程序,产品提出要求导航栏字体样式,然后系统的未提供修改的接口. 那么只能自定义导航栏才行呀. 迅速的自定义了一个导航栏 app.json中添加 "navigationStyle& ...

小程序自定义菜单Navbar

小程序自定义菜单Navbar相关推荐

最新文章

热门文章