微信小程序--自定义导航栏

最新推荐文章于 2024-06-20 13:41:59 发布
最新推荐文章于 2024-06-20 13:41:59 发布
阅读量1.1k 收藏 13
点赞数 3
分类专栏： 前端笔记 文章标签： 微信小程序 导航栏 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuan_mingyu/article/details/98516465
版权

自定义导航栏

由于需要，小程序是通过用户名和密码登录的，不是通过微信授权登录。小程序本身自带tabBar，但是无法动态改变，小程序用户角色不同，需要显示的导航栏不同，这时，就需要自定义导航栏了。开始查资料的时候，有已经写好的底部导航栏，可以动态改变，于是直接复制过来，但是很快发现了问题：底部导航栏的固定使用的是 position：fixed，bottom：0 ， 也就是固定在底部。这时的问题是，导航栏会和正文部分内容重叠。于是又去问度娘，有解决方法说，给正文部分加一个padding-bottom就行，不过我自己试了好多遍，修改了好多，还是无法解决重叠的问题，这个问题困扰了我好久，，后来终于查到了一篇博客，解决了问题。

根据登录角色不同，设置底部导航栏

首先，新建一个文件夹，封装底部导航栏
在这里插入图片描述
其中只需完成tabBar.wxml，样式直接放在app.wxss中
在这里插入图片描述
tabBar.wxml

<template name="tabBar">   
  <view class="tab-bar" style="color: {{tabBar.color}};backgroundcolor:white" > 
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">    
    <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">    
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>    
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>  
      <text class='tabbar_text' style='display:block'>{{item.text}}</text> 
    </navigator>    
    </block>  
    <view class="clear"></view>    
  </view>    
</template>

app.wxss

.container {
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
/* 角色1 */
.menu-item{
  width: 25%;  
  float: left;  
  text-align: center; 
  padding: 0;  
  padding-top: 15rpx; 
  background-color: white;
}  
/* 角色2 */
.menu-item1{  
  width: 33.3%;  
  float: left;  
  text-align: center; 
  padding: 0; 
  padding-top: 15rpx;  
  background-color: white;
}  
/* 角色3 */
.menu-item2{
  width: 50%;  
  float: left;  
  text-align: center; 
  padding: 0;  
  padding-top: 15rpx;  
  background-color: white;
}
.img{  
  width: 35rpx;  
  height: 35rpx;  
  display: block;  
  margin:auto;  
}  
.clear{  
  clear: both;  
}  
.tab-bar{ 
  width: 100%;  
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(109, 82, 82, 0.1);
}  
.tabbar_text{
  margin-top: 5rpx;
  margin-bottom: 8rpx;
  font-size: 24rpx
}

调用导航栏，根据角色动态改变
实现原理：
小程序中每个页面都有自己的导航栏，即在每个页面中调用相应角色的导航栏

调用函数定义
直接写在app.js中
在这里插入图片描述
app.js

//角色1 
  editTabBar0: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar0;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },

  //角色2  
  editTabBar1: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar1;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },  

  //角色3  
  editTabBar2: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar2;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },

同时，将导航栏参数，放在全局变量中

app.js

  globalData: {
    userInfo: null,
    tabBar0: {
      "color": "#747474",
      "selectedColor": "#D03A28",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "医疗服务",
          "iconPath": "../images/bars/medical1.png",
          "selectedIconPath": "../images/bars/medical.png",
          "clas": "menu-item",
          "selectedColor": "#D03A28",
          active: true
        },
        {
          "pagePath": "/pages/daily/daily",
          "text": "日常服务",
          "iconPath": "../images/bars/daily1.png",
          "selectedIconPath": "../images/bars/daily.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/class/class",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/oldcenter/oldcenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        }
      ],
      "position": "bottom"
    },

    tabBar1: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/daily_volunteer/daily_volunteer",
          "text": "日常服务",
          "iconPath": "../images/bars/daily1.png",
          "selectedIconPath": "../images/bars/daily.png",
          "clas": "menu-item1",
          "selectedColor": "#D03A28",
          active: true
        },
        {
          "pagePath": "/pages/volunteer_service/volunteer_service",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item1",
          active: false
        },
        {
          "pagePath": "/pages/volunteercenter/volunteercenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item1",
          active: false
        }
      ],
      "position": "bottom"
    },

    tabBar2: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/admin_activity/admin_activity",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item2",
          active: true
        },
        {
          "pagePath": "/pages/admincenter/admincenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item2",
          active: false
        }
      ],
      "position": "bottom"
    },
  }

页面中调用举例

example.wxml

<import src="../template/tabBar.wxml"/>
<view>正文</view>
<template is="tabBar" data="{{tabBar:tabBar}}"></template>

example.js

const app = getApp();
Page({
		onLoad: function (options) {
		 app.editTabBar0();//加载底部导航栏,角色1
		}
	})

总结：在登录时判断用户角色，跳转到相应角色的首页，之后按照上述过程，在每个界面调用相应的导航栏即可。

底部导航栏实现

角色1
在这里插入图片描述
角色2
在这里插入图片描述
角色3
在这里插入图片描述

顶部导航

为了方便显示更多内容，有时候需要在界面顶部设置分页的tab，减少页面跳转。
在这里插入图片描述
这个的实现比较简单，通过设置两个顶部栏的点击事件，来控制顶部栏样式的改变和正文部分view的显示隐藏即可。微信小程序与网页不同，js改变样式、属性等，都是通过绑定js中的data来实现。

顶部和底部导航固定

由于正文部分高度不确定，因此页面的基本结构设置成：顶部和底部固定，中间部分滚动

基本框架

wxml

<view class='wraper'>
  <view class='header'>header</view>
  <view class='main'>
    <scroll-view class='main-scroll' scroll-y style="height: 100%">
      <view class='main-list'>
      main
      </view>
    </scroll-view>
  </view>
  <view class='footer'>footer</view>
</view>

wxss

page{
  width: 100%;
  height:100%;
}

.wraper{
  display: flex;
  flex-direction: column;
  width: 100%;
  height:100%;
}

.main{
  flex: 1;
  position: relative;
}

.main-scroll{
  position: absolute;
}

.main-list{
  display: flex;
  flex-wrap: wrap;
}

使用：将已经实现的顶部和底部导航放在框架的header和footer位置。

tomorain23
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp开发微信小程序--自定义顶部导航栏
weixin_48596030的博客
08-01 3028
"navigationStyle" : "custom" //自定义导航栏。
微信小程序 自定义底部导航栏
开发路上的AZhe
09-16 1801
自定义底部导航需写一个共用模板： （名称自定义） <template name="nav"> <view class="nav_link" bindtap="{{fn}}"> <button class="defalut_btn {{current==0?'':'on_cor'}}...
微信小程序之底部导航栏——tabBar
热门推荐
champion0324的博客
09-23 5万+
微信的开发文档里有，很多人也写了，自己写一遍，加深印象罢！ 在学习Android的时候，被模仿一个app的界面，实现其UI。而一般来说，总是避免不了导航栏的。 比较大众化的，就是底部导航栏啦，而实现的方式也是非常的多，如：Fragment+ViewPage Or 来一个RadioGroup Or 以前的TabHost 等~ 效果，是一样或差不多的，而实现手法，是五花八门特色鲜明的！ 在
[保姆级教程]uniapp自定义导航栏
最新发布
肥晨开发的学习之路
06-20 3549
在你的页面.vue文件中，使用或标签在页面顶部添加自定义的导航栏视图。这可以包括标题文本、返回按钮、搜索框等。
微信小程序的自定义导航栏
qq_45797421的博客
10-21 2862
微信小程序的导航栏主要分为两个部分：状态栏和标题栏。 关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度。 注意获取到的数值单位都是px。 首先要开启自定义导航栏和知道两个API： 开启导航栏：在当前页面的json文件中设置 “navigationStyle”:“custom” ，开启自定义导航栏。具体看小程序官网页面配置，链接。 API接口： wx.getSystemInfoSync() 和 wx.getMenuButtonBoundingClientRect(
微信小程序设置底部导航栏
m0_60708088的博客
05-15 379
微信小程序设置底部导航栏_shykevin的博客-CSDN博客
微信小程序(底部导航栏tabBar)
诡白丷的博客
11-15 418
微信小程序-底部导航栏tabBar 基本结构 基本结构： “tabBar”:{ "list":[{ **标签**:"内容", **标签**:“内容”, .... }] } 标签关键词 **
【微信小程序】自定义导航栏
得意小门生的博客
08-31 566
微信头部导航栏可能通过json配置： （文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html） 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： 分析上图，我得到如下信息： Android 跟 iOS 有差异，表现在顶部到胶囊按钮之间的距离差了 6pt 胶囊按钮高度为 32pt， iOS 和 Android 一致 如何计算 导航栏分为状态栏和标题栏，只要能算出每台手机的
微信小程序----导航栏透明渐变一
12-20
为了实现透明渐变，我们需要自定义导航栏样式。 接下来，我们将详细讲解如何利用CSS3的`opacity`属性来实现这个效果。`opacity`属性允许我们设置元素的不透明度，其值范围是0（完全透明）到1（完全不透明）。在微信...
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
在`custom-tab-bar`目录下编写自定义导航栏组件，然后在`app.json`中引入并替换默认的tabBar。 6. **事件处理**：微信小程序中的事件绑定可以帮助我们响应用户操作，例如点击导航栏按钮。在`Page`对象的`onLoad`和`...
微信小程序 自定义头部导航栏 navigationStyle
12-24
微信小程序 自定义头部导航栏 navigationStyle，修改微信小程序默认情况下只有返回的按钮，具体使用方法很简单，这里是直接使用组件方式，
微信小程序-顶部导航栏TopBar.zip
10-08
在这个"微信小程序-顶部导航栏TopBar.zip"压缩包中，我们主要关注的是如何在微信小程序中实现一个可滑动的顶部导航栏。 顶部导航栏（TopBar）是用户界面设计中的一个重要元素，通常用于展示应用的当前页面或功能，...
微信小程序 ---- 导航栏随滚动透明渐变
11-08
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变，但是需要注意的是不兼容IE8及以下的IE浏览器，原因：由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值！
微信小程序——底部导航栏
weixin_61972561的博客
05-17 758
微信小程序——底部导航栏
微信小程序底部导航栏
Zhuchang1999的博客
04-13 1489
要在app.json里配置"taBar",(app.json 用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。) taBar:底部导航配置属性 pagePath作用:导航栏所连接的界面 text:导航图标下方的文字 iconPath:未选中图标路径 selectedIconPath:选中时图标路径 list:导航配置数组 注意： list里面的...
微信小程序之底部导航栏（一）
llixiangjian的博客
08-15 1543
前两周很忙碌的边学就边做项目了，时间很赶，还没好好的总结一下，开发的时候自己就首先去看了小程序的API和对其目录结构的了解以及其工具的使用。 在了解完这些后开始进行对小程序开发的设计进行了大体的规划及搭建，其实小程序跟Android界面设计基本都那样。 好了，就从自己搭建项目开始的每个小块进行开始。 下面是对“tabBar”的简单应用，小程序API也可以直接进行拷贝复制小程序API 的htt
微信小程序制作页面内导航栏
weixin_49376462的博客
02-24 1044
微信小程序编写导航栏，简单易懂，一看就会
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值