这篇文章给大家分享的是微信小程序底部导航的实现。小编觉得挺实用的，很多场景能能使用到，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

    建一个tabbar.wxml组件

<template name="tabBar">
 <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}};

 {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}};">

 <block wx:for="{{tabBar.list}}" wx:key="pagePath">
 <navigator hover-class="none" url="{{item.pagePath}}" open-type="redirect" class="tabbar_item {{item.clas}}"

 style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}};

position:relative;">
 <image src="{{item.selectedIconPath}}" wx:if="{{item.active&&item.selectedIconPath}}" class="img"></image>
 <image src="{{item.iconPath}}" wx:if="{{!item.active&&item.iconPath}}" class="img"></image>
 <image src="{{item.logo}}" wx:if="{{item.logo}}" style="width:110rpx;height:110rpx;border:10rpx solid #ffffff;

border-radius:50%;position:absolute;top:-50%;left:-40%,"></image>
 <text class="tabbar_text" wx:if="{{item.text}}">{{item.text}}</text>
 </navigator>
 </block>
 </view>
</template>

    app.js中定义

 editTabBar: function () {
 //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。

 var curPageArr = getCurrentPages(); //获取加载的页面
 var curPage = curPageArr[curPageArr.length - 1]; //获取当前页面的对象
 var pagePath = curPage.route; //当前页面url
 if (pagePath.indexOf('/') != 0) {
 pagePath = '/' + pagePath;
 }

 var tabBar = this.globalData.tabBar;
 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
 });
 },
 globalData: {
 tabBar: {
 "color": "#B0B6B8",
 "selectedColor": "#4877BD",
 "backgroundColor": "#ffffff",
 "borderStyle": "#ccc",
 "list": [{
 "pagePath": "/pages/messagelist/messagelist",
 "text": "消息",
 "iconPath": "/img/message-1.png",
 "selectedIconPath": "/img/message-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 },
 {
 "pagePath": "/pages/salefriend/salefriend",
 "text": "名片",
 "iconPath": "/img/card-1.png",
 "selectedIconPath": "/img/card-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 },
 {
 "pagePath": "/pages/customnav/customnav",
 "text": "",
 // "iconPath": "/img/gifts.png",
 // "selectedIconPath": "/img/gifts.png",
 "logo":"/img/logo.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 islogo:true,
 active: false
 },
 {
 "pagePath": "/pages/salescircle/salescircle",
 "text": "发现",
 "iconPath": "/img/discover-1.png",
 "selectedIconPath": "/img/discover-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 },
 {
 "pagePath": "/pages/mine/mine",
 "text": "我的",
 "iconPath": "/img/mine-1.png",
 "selectedIconPath": "/img/mine-2.png",
 "selectedColor": "#4877BD",
 "clas": "menu-item",
 active: false
 }
 ],
 "position": "bottom"
 },
 },

    在需要用的导航的页面的wxml

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

    在需要用的导航的页面的js中

const app = getApp();
 onShow: function () {
 app.editTabBar(); //显示自定义的底部导航

 },

    以上就是关于微信小程序实现底部导航的介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考了解看看，希望对大家有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript编译原理怎样理解，包括哪些内容

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了编译原理的相关问题，Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，下面一起来看一下，希望对大家有帮助。

• HTML5中如何操作类属性，方法是什么

  这篇文章主要给大家分享的是JavaScript用html5新方法操作元素类名的详解，早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。现在html5给所有元素增加了classList属性来操作类属性，非常方便，下面就一起来看看具体操作过程吧

• 基于Vue和ssh如何实现在线聊天，具体过程是什么

  这篇文章主要为大家详细介绍了Vue+ssh框架实现在线聊天，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS页面滚动动画效果的实现方法是什么

  这篇文章主要介绍了JavaScript 实现页面滚动动画的方法，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下

• 详解class语法糖，有哪些基础知识要了解

  目录引言class 第一个好：私有变量class 第二个好：super 继承引言在很早以前，写过一篇文章 “类”设计模式和“原型”设计模式——“复制”和“委托”的差异 ，大致意思就是说：代码复用，也就是继承、重写，有两种思路：1. 面向对象的类继承；2. 基于 JavaScript 原型链的原型继承；前者的主要特点是：