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

    建一个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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何用Js实现画廊相册效果

  这篇文章给大家分享的是有关Js实现画廊效果的内容，小编觉得挺实用的，可以用来做图片展示，下文有两种实现效果及代码，感兴趣的朋友可以做个参考，接下来一起跟随小编看看吧。

• vue中封装弹窗表单的实现是什么样的

  目录vue ant design 封装弹窗表单使用ant-design-vue的Form表单使用脚手架新建项目安装并导入ant-design-vue,使用Form组件启动应用,测试验证vue ant design 封装弹窗表单template div id=formForm a-modal

• Node实现获取命令行参数的方法及操作是什么

  在开发cli工具时，往往离不开获取指令中各种参数信息，接下来本文将带着你如何在Node.js中获取执行时的参数

• 小程序购物车功能怎样做，关键要点是什么

  这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript ES模块怎样用？模块中导出和导入如何实现？

  这篇文章给大家分享的是JavaScript ES模块使用的相关内容，介绍你可以在模块中导出和导入的所有方法，小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。