小程序 ：自定义tabbar （名称后台获取）
一、自定义tabbar，名称前台固定
1、app.json 中的 “tabBar”，新增 “custom”: true
2、根目录下，与pages同级，新建 custom-tab-bar 文件夹，下新建 index component四项
index.wxml
<cover-view class="root" style="background-color: {{tabBar.backgroundColor}};">
<cover-view class="tab" bindtap="switchTab"
wx:for="{{tabBar.list}}" wx:key="index"
data-path="{{'/' + item.pagePath}}" data-index="{{index}}">
<cover-image src="{{index == tabIndex ? item.selectedIconPath : item.iconPath}}">cover-image>
<cover-view style="color: {{index == tabIndex ? tabBar.selectedColor : tabBar.color}};">{{item.text}}cover-view>
cover-view>
cover-view>
index.wxss
/* 根标签样式 */
.root {
height: 100rpx;
border-top: 1px solid rgb(221, 221, 221);
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
bottom: 0px;
width: 100%;
}
/* 每个Tab的样式 */
.tab {
text-align: -webkit-center;
flex-grow: 1;
}
.tab cover-image {
width: 50rpx;
height: 50rpx;
}
.tab cover-view {
font-size: 25rpx;
padding-top: 5rpx;
text-align: center;
}
index.json
{
"component": true,
"usingComponents": {}
}
index.js
Component({
data: {},
methods: {
switchTab(event) {
console.log("event========"+event)
// data为接受到的参数
const data = event.currentTarget.dataset;
// 取出参数中的path作为路由跳转的目标地址
console.log("data========"+data)
console.log("data.path========"+data.path)
console.log("data.index========"+data.index)
wx.switchTab({url: data.path});
},
}
})
3、pages文件夹中，新建三个文件夹：index、other、user，对应新建各自的component。
index.wxml
<view class="btns">
hello index page
view>
index.wxss
/* pages/other/index.wxss */
index.json
{
"component": true,
"usingComponents": {}
}
index.js
const tabService = require("../../utils/tab-service");
Page({
data: {},
//指定当前的页面顺序，否则高亮混乱。
onShow() {
tabService.updateIndex(this, 0);
}
})
other.js
const tabService = require("../../utils/tab-service");
Page({
data: {},
//指定当前的页面顺序，否则高亮混乱。
onShow() {
tabService.updateIndex(this, 1);
}
})
user.js
const tabService = require("../../utils/tab-service");
Page({
data: {},
//指定当前的页面顺序，否则高亮混乱。
onShow() {
tabService.updateIndex(this, 2);
}
})
4、utils文件夹下，新建 tab-service.js 文件
tab-service.js
// Tab页的data
let tabData = {
tabIndex: 0,
tabBar: {
custom: true,
color: "#5F5F5F",
selectedColor: "#027FF5",
backgroundColor: "#F7F7F7",
list: [{
iconPath: "/images/footer-01.png",
selectedIconPath: "/images/footer-01-h.png",
pagePath: "pages/index/index",
text: "1111"
}, {
iconPath: "/images/footer-03.png",
selectedIconPath: "/images/footer-03-h.png",
pagePath: "pages/other/other",
text: "2222"
}, {
iconPath: "/images/footer-03.png",
selectedIconPath: "/images/footer-03-h.png",
pagePath: "pages/user/user",
text: "3333"
}]
},
}
// 更新底部高亮
const updateIndex = (that, index) => {
tabData.tabIndex = index;
updateTab(that);
}
// 更新Tab状态
const updateTab = (that) => {
if (typeof that.getTabBar === 'function' && that.getTabBar()) {
that.getTabBar().setData(tabData);
}
}
// 将可调用的方法抛出让外面调用
module.exports = {
updateTab, updateIndex
}
下载链接
二、自定义tabbar，名称后台获取
前两步与一中的一致，从第三步开始有区别
3、pages文件夹中，新建三个文件夹：index、other、user，对应新建各自的component。
每个文件新增调用后台函数：
//tabbar内容联网获取
onLoad(e)
{
tabService.updatetab(this);
},
index.js
const tabService = require("../../utils/tab-service");
Page({
data: {},
//tabbar内容联网获取
onLoad(e)
{
tabService.updatetab(this);
},
//指定当前的页面顺序，否则高亮混乱。
onShow() {
tabService.updateIndex(this, 0);
}
})
other.js
const tabService = require("../../utils/tab-service");
Page({
data: {},
//tabbar内容联网获取
onLoad(e)
{
tabService.updatetab(this);
},
//指定当前的页面顺序，否则高亮混乱。
onShow() {
tabService.updateIndex(this, 1);
}
})
user.js
const tabService = require("../../utils/tab-service");
Page({
data: {},
//tabbar内容联网获取
onLoad(e)
{
tabService.updatetab(this);
},
//指定当前的页面顺序，否则高亮混乱。
onShow() {
tabService.updateIndex(this, 2);
}
})
4、utils文件夹下，新建 tab-service.js 文件
// Tab页的data
let tabData = {
tabIndex: 0,
tabBar: {
custom: true,
color: "#5F5F5F",
selectedColor: "#027FF5",
backgroundColor: "#F7F7F7",
list: [{
iconPath: "/images/footer-01.png",
selectedIconPath: "/images/footer-01-h.png",
pagePath: "pages/index/index",
text: "1111"
}, {
iconPath: "/images/footer-03.png",
selectedIconPath: "/images/footer-03-h.png",
pagePath: "pages/other/other",
text: "2222"
}, {
iconPath: "/images/footer-03.png",
selectedIconPath: "/images/footer-03-h.png",
pagePath: "pages/user/user",
text: "3333"
}]
},
}
// 更新Tab状态
const updatetab = (that) => {
var navLbList=[];
//***********后台请求开始**************
//********************************* */
wx.request({
url: '*******************************************',
header: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: (res) => {
var dl=res.data;
for(var i in dl){
var t=dl[i].type;
if(t=='base-nav-main'){
navLbList.push(dl[i]);
}
}
for(var i in navLbList)
{
tabData.tabBar.list[i].text = navLbList[i].name;
updateTab(that);
console.log("navLbList========="+navLbList[i].name)
}
}
})
//********************************* */
//***********后台请求结束**************
}
// 更新底部高亮
const updateIndex = (that, index) => {
tabData.tabIndex = index;
updateTab(that);
}
// 更新Tab状态
const updateTab = (that) => {
if (typeof that.getTabBar === 'function' && that.getTabBar()) {
that.getTabBar().setData(tabData);
}
}
// 将可调用的方法抛出让外面调用
module.exports = {
updateTab, updateIndex,updatetab
}