微信小程序实现自定义底部导航_微信小程序利用tabBar生成导航栏,导航栏分别是【首页】、【消息】、【我的】资源-CSDN文库

版权申诉

微信小程序

5星 · 超过95%的资源 54 浏览量 2021-01-22 10:41:22 上传评论收藏 38KB PDF 举报

资源推荐

资源详情

资源评论

微信小程序实现自定义底部导航微信小程序实现自定义底部导航

本文实例为大家分享了微信小程序实现底部导航的具体代码，供大家参考，具体内容如下

建一个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": "名片",

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

版权申诉

leibaona1725

2023-08-05

实在是宝藏资源、宝藏分享者！感谢大佬~

x_jiali

粉丝: 5
资源: 897

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip