这个方法比较简单，虽然有一些延迟，但也算是解决了一半自定义的问题。
首先在pages同级目录下创建tabbar.wxml文件，
<template name="tabBar">
<view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position==‘top‘? ‘top: 0‘ : ‘bottom: 0‘}}; {{tabBar.borderStyle? (tabBar.position==‘top‘? ‘border-bottom: solid 1px ‘+tabBar.borderStyle + ‘;‘ : ‘border-top: solid 1px ‘+tabBar.borderStyle + ‘;‘) : ‘‘}}">
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? ‘color: ‘+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ‘‘}}">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>
<text>{{item.text}}</text>
</navigator>
</block>
<view class="clear"></view>
</view>
</template>
接着修改app.wxss样式，有很多人没有放样式的代码，为了看着改方便，我就放一下吧。
/**app.wxss**/
.container {
font-size:14px;
height: 90rpx;
}
.menu-item:nth-child(1){
font-size: 11px;
}
.menu-item {
width: 24%;
float: left;
text-align: center;
line-height: 30rpx;
}
.menu-item2{
border-right:none;
}
.img {
width: 40rpx;
height: 40rpx;
display: block;
margin: auto;
}
.clear {
clear: both;
}
.tab-bar {
background-color:#242630;
position: fixed;
border:none;
width: 100%;
height: 90rpx;
/* padding: 0px 2%; */
}
在app.js文件中加入下边这些代码，我直接放了全部的js，还是因为懒哈哈哈
//app.js
App({
onLaunch: function() {
wx.getSystemInfo({
success: res => {
//导航高度
this.globalData.navHeight = res.statusBarHeight + 46;
},
fail(err) {
console.log(err);
}
})
// 展示本地存储能力
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting[‘scope.userInfo‘]) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
};
console.log(res)
},
}),
wx.getSystemInfo({
success: res => {
//导航高度
this.globalData.navHeight = res.statusBarHeight + 46;
},
fail(err) {
console.log(err);
}
})
},
globalData: {
userInfo: null
},
editTabBar: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
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: {
userInfo: null,
tabBar: {
color: "#999999",
selectedColor: "#FFFFFF",
list: [
{
pagePath: "/pages/index/index",
selectedIconPath: "/pages/images/like.png",
iconPath: "/pages/images/like.png",
text: "首页",
clas: "menu-item",
selected: false,
},
{
pagePath: "/pages/line/line",
text: "收藏",
clas: "menu-item",
selected: false
},
{
pagePath: "/pages/shopping/shopping",
text: "需求填写",
clas: "menu-item",
selected: false
},
{
pagePath: "/pages/my/my",
text: "房屋管理",
clas: "menu-item menu-item2",
selected: false
}
],
position: "bottom"
}
}
})
到了此处所有的模版代码就已经完成了，下面我们来引入模版
在你需要模版的.wxml文件中加入
<view class="container">
<import src="../../tabbar.wxml" />
<template is="tabBar" data="{{tabBar}}" />
2
</view>
然后再对应的js文件中加入
const app = getApp()
Page({
data: {
},
onLoad: function (options) {
app.editTabBar();
},
})
截至此处就完成了，因为个人原因就没放图片，但是这个方法比较简单，几分钟就可以搞定。当然也有一些bug等着你们hhhh
继续撸码去咯
原文地址：https://www.cnblogs.com/qiyan/p/10670428.html
时间： 2024-08-22 01:17:53