小程序 :自定义tabbar (名称后台获取)

一、自定义tabbar,名称前台固定

1、app.json 中的 “tabBar”,新增 “custom”: true

小程序 :自定义tabbar (名称后台获取)_第1张图片

2、根目录下,与pages同级,新建 custom-tab-bar 文件夹,下新建 index component四项

小程序 :自定义tabbar (名称后台获取)_第2张图片

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。

小程序 :自定义tabbar (名称后台获取)_第3张图片

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 文件

小程序 :自定义tabbar (名称后台获取)_第4张图片

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
}

你可能感兴趣的:(#,小程序,小程序,前端,javascript)