做这个 遇到问题比较多,特此记录以便查看,直接上代码:

一、app.js

控制原有菜单隐藏、启用新菜单、菜单列表,集中在这里控制

hideTabBar这个很关键,解决苹果6S导致的双导航栏:原文https://blog.csdn.net/czp555/article/details/87258301

hideTabBar: function () {
wx.hideTabBar({
fail: function () {
setTimeout(function () {
wx.hideTabBar()
}, 500)
}
});
},
editTabbar: function() {
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for (let i in tabbar.list) {
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
globalData: {
tabBar: {
"color": "#f3f3f3",
"selectedColor": "#f3f3f3",
"borderStyle": "white",
"backgroundColor": "#ff731d",
"list": [{
"pagePath": "/youfan_market/pages/index/index",
"text": "首页",
"iconPath": "/youfan_market/resource/images/tabBar/home.png",
"selectedIconPath": "/youfan_market/resource/images/tabBar/home.png"
},
{
"pagePath": "/youfan_market/pages/category/category",
"text": "分类",
"iconPath": "/youfan_market/resource/images/tabBar/category.png",
"selectedIconPath": "/youfan_market/resource/images/tabBar/category.png"
},
{
"pagePath": "/youfan_market/pages/user/index",
"text": "分享转发",
"iconPath": "/youfan_market/resource/images/tabBar/share.png",
"selectedIconPath": "/youfan_market/resource/images/tabBar/share.png",
isShare: true
},
{
"pagePath": "/youfan_market/pages/cart/cart",
"text": "购物车",
"iconPath": "/youfan_market/resource/images/tabBar/cart.png",
"selectedIconPath": "/youfan_market/resource/images/tabBar/cart.png"
},
{
"pagePath": "/youfan_market/pages/user/index",
"text": "我的",
"iconPath": "/youfan_market/resource/images/tabBar/user.png",
"selectedIconPath": "/youfan_market/resource/images/tabBar/user.png"
}
]
}
},

二、自定义组件

关于图标资源就不发了,需要的自己去iconfont找

在小程序根目录创建组件文件夹 tabbarComponent

tabbar.js

// tabBarComponent/tabBar.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
tabbar: {
type: Object,
value: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": []
}
}
},
/**
* 组件的初始数据
*/
data: {
isIphoneX:false // app.globalData.systemInfo.model == "iPhone X" ? true : false,
}, /**
* 组件的方法列表
*/
methods: {
},
})

tabbar.json

{
"component": true,
"usingComponents": {}
}

tabbar.wxml

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
<block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
<navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate">
<view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
<image class='special-text-wrapper'></image>
{{item.text}}
</navigator>
<button wx:elif='{{item.isShare}}' class="tabbar_nav tabbar_btn" hover-class="none" style="color:{{tabbar.color}};border-radius:90%;" open-type="share">
<image class="tabbar_icon" src="{{item.iconPath}}"></image>
{{item.text}}
</button>
<!-- <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator> -->
<navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
{{item.text}}
</navigator>
</block>
</view>

tabbar.wxss

.tabbar_box {
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999999;
width: 100%;
height: 98rpx;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
} .tabbar_box.iphoneX-height {
padding-bottom: 66rpx;
} .middle-wrapper {
position: absolute;
right: 310rpx;
bottom: 0;
background-color: #fff;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
} .middle-wrapper.iphoneX-height {
bottom: 66rpx;
} .tabbar_nav {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
height: 100%;
position: relative;
} .tabbar_btn {
padding: 0;
border: none;
background: #ff731d;
} .tabbar_icon {
width: 50rpx;
height: 50rpx;
} .special-wrapper {
position: absolute;
left: 77rpx;
top: -36rpx;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
} .special-wrapper .tabbar_icon {
width: 84rpx;
height: 84rpx;
} .special-text-wrapper {
width: 56rpx;
height: 56rpx;
}

三、页面调用

js

var app = getApp()
Page({
data: {
tabbar: {},
},
onLoad: function(options) {
app.editTabbar(); },
onReady: function () {
app.hideTabBar();
},
onShow: function () {
app.hideTabBar();
},

json

{
"enablePullDownRefresh": false,
"usingComponents": {
"tabbar": "../../tabbarComponent/tabbar"
}
}

wxml 底部添加

<tabbar tabbar="{{tabbar}}"></tabbar>

OK,万事大吉了

最后要说的没源码,没时间去弄

推荐一篇别人的写的:https://www.jianshu.com/p/2cd4a23b504b

微信小程序开发之自定义菜单tabbar的更多相关文章

  1. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

  2. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  3. 微信小程序开发之下拉菜单

    实现功能:点击维保人员,调出下拉菜单.选择子菜单时,显示右边的图标表示选中,并进行赋值并进行搜索筛选 Wxml: <view class="dtclass" bindtap= ...

  4. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  6. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  7. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  8. 《腾讯游戏人生》微信小程序开发总结

    为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...

  9. 我们的微信小程序开发

    基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传 ...

随机推荐

  1. PyQt5中的信号与槽,js 与 Qt 对象之间互相调用

    一.PyQt中的信号与槽 信号(Signal)和槽(Slot)是Qt中的核心机制,用在对象之间互相通信.在Qt中每个QObject对象和PyQt中所有继承自QWidget的控件(这些都是QObject ...

  2. ora-14400:插入的分区关键字未映射到任何分区

    参考:https://blog.csdn.net/rubychen410/article/details/5317553 出现该问题是由于: 1.为表设置了根据时间进行分区(PARTITION),而每 ...

  3. jQuery 与 Ajax 的应用

    Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...

  4. 如何在springboot项目中进行XSS过滤

    简单介绍 XSS : 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意 ...

  5. Transformer

    参考资料: [ERT大火却不懂Transformer?读这一篇就够了] https://zhuanlan.zhihu.com/p/54356280 (中文版) http://jalammar.gith ...

  6. 仿 ELEMENTUI 实现一个简单的 Form 表单

    原文:仿 ElmentUI 实现一个 Form 表单 一.目标 ElementUI 中 Form 组件主要有以下 功能 / 模块: Form FormItem Input 表单验证 在这套组件中,有 ...

  7. linux shell 命令集锦

    -h FILEFILE exists and is a symbolic link (same as -L)文件存在并且是一个字符链接(与-L选项相同) dirname $0  定位执行的命令脚本的相 ...

  8. Nginx从入门到实践(一)

    结合实践.收集各种场景.常见问题,讲解Nginx中最实用的Webserver场景,提供一套整体的搭建配置方式 Nginx中间件,不局限于业务逻辑,有效独立于后台开发框架(不论后端是Java开发.PHP ...

  9. practice01

    1. 组合数公式: C(n, k) =C(n-1, k) +C(n-1, k-1) 要求利用该公式写递归函数求组合数. #include <stdio.h> int C(int a,int ...

  10. 【linux】工作中linux系统常用命令操作整理

    1.Linux如何查看端口 使用lsof(list open files)命令,lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000. 或者使用n ...