自定义小程序底部菜单
时间：2018-09-30 10:46:44
收藏：0
阅读：1037
第一次写博客，如果有描述不当的地方，请多多包容，也欢迎指教。
做完第一个小程序的时候就觉得小程序的底部菜单有点坑，自己做的遮罩层根本无法遮住它，所以做第二个项目的时候，就决定自己模拟一个小程序底部菜单。下面说一下自己自定义底部菜单需要了解和注意的事项
1.小程序页面层级不能超过10级
2.小程序的wx.relaunch()可以清除所有页面痕迹并跳转至指定页面，但是，用户体验超级不好，跳转页面的时候会闪一下载跳转
3.小程序的wx.redirecto()关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。用户体验跟wx.relaunch()一样，让人看着就很不开心。
4.小程序的wx.navigateto()保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面。
5.小程序的wx.navigateBack可以通过delta返回至指定页面
综上所述，为了实现自定义的预想，又要解决用户体验问题。下面就是我的实现代码。
1.项目目录如上图
2.tabBar.wxml
<view class="wrapper">
<view hidden=‘{{isModal}}‘ class=‘barModal‘>
<view bindtap="hideToCreate" class=‘modal_bg‘></view>
<view class=‘inte_ite‘>
<view class="tobarItem" bindtap="toNewPost">
<image class="toImgbar" src="../../icon/index_material.png" />
<view>发帖子</view>
</view>
<view class="tobarItem" bindtap="toNewDynamic">
<image class="toImgbar" src="../../icon/index_enterprise.png" />
<view>发动态</view>
</view>
</view>
</view>
<view class="wrappe_tab">
<view bindtap=‘tabBarFun‘ class=‘item_con‘ id="{{item.id}}" wx:for="{{tabBarList}}" wx:key="id">
<image wx:if="{{!item.isCouter}}" class="{{item.class}}" src="{{item.iconPath}}" />
<image wx:if="{{item.isCouter}}" class="{{item.class}}" src="{{item.selectedIconPath}}" />
<view class="{{item.isCouter?‘tab_font isCouter‘:‘tab_font‘}}">{{item.text}}</view>
</view>
</view>
</view>
3.tabBar.js
const app = getApp();
Component({
data: {
isModal: true,
tabBarList: [
{
pagePath: "pages/index/index",
text: "首页",
id: 1,
isCouter: true,
class: "tab_logo",
color: "#888888",
iconPath: "../../icon/indexIcon.png",
selectedColor: "#2873ff",
selectedIconPath: "../../icon/indexIconSe.png",
link: ‘../index/index‘
},
{
pagePath: "pages/mall/mall",
text: "商城",
class: "tab_logo",
id: 2,
isCouter: false,
iconPath: "../../icon/selectCarIcon.png",
selectedIconPath: "../../icon/selectCarIconSe.png",
link: ‘../mall/mall‘
},
{
pagePath: "pages/new/new",
class: "logo_mid",
id: 5,
isCouter: true,
iconPath: "../../icon/tabBar_new.png",
selectedIconPath: "../../icon/tabBar_new.png"
},
{
pagePath: "pages/message/message",
text: "消息",
class: "tab_logo",
id: 3,
isCouter: false,
iconPath: "../../icon/consultingIcon.png",
selectedIconPath: "../../icon/consultingIconSe.png",
link: ‘../message/message‘
},
{
pagePath: "pages/mine/mine",
text: "我的",
id: 4,
isCouter: false,
class: "tab_logo",
color: "#888888",
selectedColor: "#2873ff",
iconPath: "../../icon/myIcon1.png",
selectedIconPath: "../../icon/myIconSe.png",
link: ‘../mine/mine‘
}
]
},
ready: function(options) {
var ts = this;
var pages = getCurrentPages();
var currentPage = pages[pages.length - 1]; //获取当前页面的对象
var url = currentPage.route; //当前页面url
var list = this.data.tabBarList;
if (url == "pages/index/index") {
list[0].isCouter = true;
list[1].isCouter = false;
list[4].isCouter = false;
list[3].isCouter = false;
this.setData({
tabBarList: list,
});
//debugger
} else if (url == "pages/mall/mall") {
list[1].isCouter = true;
list[0].isCouter = false;
list[4].isCouter = false;
list[3].isCouter = false;
this.setData({
tabBarList: list,
});
} else if (url == "pages/message/message") {
list[3].isCouter = true;
list[4].isCouter = false;
list[1].isCouter = false;
list[0].isCouter = false;
this.setData({
tabBarList: list,
});
} else if (url == "pages/mine/mine") {
list[4].isCouter = true;
list[0].isCouter = false;
list[1].isCouter = false;
list[3].isCouter = false;
this.setData({
tabBarList: list,
});
}
},
methods: {
hideToCreate: function () {
this.setData({
isModal: true,
});
},
toNewPost: function () {
wx.navigateTo({
url: ‘../index/newPost/newPost‘
});
this.setData({
isModal: true,
});
},
toNewDynamic: function () {
wx.navigateTo({
url: "../index/newDynamic/newDynamic"
});
this.setData({
isModal: true,
});
},
tabBarFun: function(e) {
var ts = this;
var id = Number(e.currentTarget.id);
var list = this.data.tabBarList;
var pages = app.pages;
console.log(‘length:‘+pages.length)
var currentPage = pages[pages.length - 1]; //获取当前页面的对象
var url = currentPage.route; //当前页面url
let len = 0,
flag = false;
// debugger
if (url != "pages/index/index" && id == 1) {
for (let i = 0; i < pages.length; i++) {
++len;
if (pages[i].route == "pages/index/index") {
flag = true;
break;
}
}
console.log(‘len:index‘+len);
if (flag) {
wx.navigateBack({
delta: pages.length - len
});
} else {
wx.navigateTo({
url: ‘pages/index/index‘
});
}
} else if (url != "pages/mall/mall" && id == 2) {
for (let i = 0; i < pages.length; i++) {
++len;
if (pages[i].route == "pages/mall/mall") {
flag = true;
break;
}
}
if (flag) {
wx.navigateBack({
delta: pages.length - len
});
} else {
wx.navigateTo({
url: ‘/pages/mall/mall‘
});
}
} else if (url != "pages/message/message" && id == 3) {
for (let i = 0; i < pages.length; i++) {
++len;
if (pages[i].route == "pages/message/message") {
flag = true;
break;
}
}
if (flag) {
wx.navigateBack({
delta: pages.length - len
});
} else {
wx.navigateTo({
url: ‘/pages/message/message‘
});
}
} else if (url != "pages/mine/mine" && id == 4) {
for (let i = 0; i < pages.length; i++) {
++len;
if (pages[i].route == "pages/mine/mine") {
flag = true;
break;
}
}
if (flag) {
wx.navigateBack({
delta: pages.length - len
});
} else {
wx.navigateTo({
url: ‘/pages/mine/mine‘
});
}
} else if (id == 5) {
this.setData({
isModal: !this.data.isModal,
})
}
}
}
})
4.tabBar.json
{
"component": true
}
5.tabBar.wxss
.wrapper{
height: 100rpx;
}
.item_con {
width: 20%;
float: left;
text-align: center;
height: 100rpx;
color: #444;
}
.modal_bg {
background-color:
rgba(100, 100, 100, 0.6); position: fixed;
width: 100%;
height: 100%;
}
.barModal {
background-color:
rgba(100, 100, 100, 0.6); position: fixed;
width: 100%;
height: 100%;
left: 0;
z-index: 1;
top: 0;
}
.inte_ite {
position: absolute;
bottom: 100rpx;
left: 0;
width: 100%;
}
.toImgbar {
width: 80rpx;
height: 80rpx;
}
.inte_ite {
">#fff;
padding: 10rpx;
}
.tobarItem {
width: 50%;
font-size: 28rpx;
float: left;
text-align: center;
}
.wrappe_tab {
position: fixed;
left: 0;
z-index: 2;
height: 100rpx;
width: 100%;
border-top: 1rpx solid #eee;
bottom: 0;
">#fff;
}
.tab_logo {
width: 45rpx;
height: 38rpx;
margin-top: 15rpx;
}
.tab_font {
font-size: 28rpx;
position: relative;
top: -4rpx;
}
.logo_mid {
width: 85rpx;
height: 65rpx;
margin-top: 17rpx;
}
.isCouter {
color: #2873ff;
}
6.在需要用到的页面文件中使用，如
//index.js
onShow(){
app.pages = getCurrentPages();
console.log(‘index.length:‘ + app.pages.length)
},
//index.json
{
"usingComponents": {
"tabBar": "../../component/tabBar/tabBar"
}
}
//index.wxml
<tabBar></tabBar>
评论（0）