• 小程序 ：自定义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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    index.json
    {
    "component": true,
    "usingComponents": {}
}

    • 1
    • 2
    • 3
    • 4
    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});
        },
    }
    
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    3、pages文件夹中，新建三个文件夹：index、other、user，对应新建各自的component。

    在这里插入图片描述

    index.wxml
    <view class="btns">
hello index page
view>

    • 1
    • 2
    • 3
    index.wxss
    /* pages/other/index.wxss */

    • 1
    index.json
    {
    "component": true,
    "usingComponents": {}
}

    • 1
    • 2
    • 3
    • 4
    index.js
    const tabService = require("../../utils/tab-service");

Page({
    data: {},
   
    //指定当前的页面顺序，否则高亮混乱。
    onShow() {
        tabService.updateIndex(this, 0);
    }
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    other.js
    const tabService = require("../../utils/tab-service");

Page({
    data: {},
   
    //指定当前的页面顺序，否则高亮混乱。
    onShow() {
        tabService.updateIndex(this, 1);
    }
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    user.js
    const tabService = require("../../utils/tab-service");

Page({
    data: {},
   
    //指定当前的页面顺序，否则高亮混乱。
    onShow() {
        tabService.updateIndex(this, 2);
    }
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    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
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    下载链接

    二、自定义tabbar，名称后台获取

    前两步与一中的一致，从第三步开始有区别

    3、pages文件夹中，新建三个文件夹：index、other、user，对应新建各自的component。

    每个文件新增调用后台函数：

        //tabbar内容联网获取
    onLoad(e)
    {
        tabService.updatetab(this);
    },

    • 1
    • 2
    • 3
    • 4
    • 5
    index.js
    const tabService = require("../../utils/tab-service");

Page({
    data: {},
   
    //tabbar内容联网获取
    onLoad(e)
    {
        tabService.updatetab(this);
    },
    
    //指定当前的页面顺序，否则高亮混乱。
    onShow() {
        tabService.updateIndex(this, 0);
    }
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    other.js
    const tabService = require("../../utils/tab-service");

Page({
    data: {},
      
    //tabbar内容联网获取
    onLoad(e)
    {
        tabService.updatetab(this);
    },
    
    //指定当前的页面顺序，否则高亮混乱。
    onShow() {
        tabService.updateIndex(this, 1);
    }
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    user.js
    const tabService = require("../../utils/tab-service");

Page({
    data: {},
   
    //tabbar内容联网获取
    onLoad(e)
    {
        tabService.updatetab(this);
    },
    
    //指定当前的页面顺序，否则高亮混乱。
    onShow() {
        tabService.updateIndex(this, 2);
    }
}) 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    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
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
  • 相关阅读:
    ctf：kali工具： msfvenom
    CentOS 7.6下学习Nginx
    webrtc-m79-测试peerconnectionserver的webclient-p2p-demo
    Java 注解及其底层原理
    安全狗云原生安全能力守护中国联通安全发展
    区块链分片
    快速打开命令行方法集合
    JAVA计算机毕业设计家政服务公司管理信息Mybatis+系统+数据库+调试部署
    巨细靡遗流程控制,Go lang1.18入门精炼教程，由白丁入鸿儒，Go lang流程结构详解EP09
    详解VSCode中C++工程配置
  • 原文地址：https://blog.csdn.net/qq_41749451/article/details/126609511