小程序 ：自定义tabbar （名称后台获取）

已于 2022-09-05 13:44:15 修改
阅读量1k 收藏 8
点赞数 5
分类专栏： # 小程序 文章标签： 小程序 前端 javascript
于 2022-08-30 18:15:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41749451/article/details/126609511
版权

一、自定义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}};">
    <!-- 循环渲染Tab标签 -->
    <cover-view class="tab" bindtap="switchTab"
        wx:for="{{tabBar.list}}" wx:key="index"
        data-path="{{'/' + item.pagePath}}" data-index="{{index}}">
        <!-- 这里需要注意路径前面要加/，或者直接修改tabBar下的list.pagePath也行 -->
        <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
}
抢我糖还想跑
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序自定义tabbar组件之中间按钮凸起
nan961136007的博客
01-10 1万+
和我前面一篇文章差不多的， 只不过逻辑有点不同，直接上效果和代码吧 先来一个模板文件，我的图片放在模板文件里 wxml <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"> <block wx:for="{...
小程序tabbar 自定义
03-01
在微信小程序开发中，自定义Tabbar是一项常见的需求，它能提供更加个性化和符合品牌特色的底部导航栏。本文将详细讲解如何实现“小程序tabbar自定义”，并涵盖以下几个关键知识点： 1. **Tabbar的基本概念**：...
微信小程序tabBar
YZi_Angel的专栏
05-23 1721
小程序新人妹纸一个，准备自己开发一个小程序，既是练习，也当实战，大神请自行离开哈~ 这里咱先看一下效果 我们先从项目搭建开始说起哈~ 项目搭建 1、注册账号 如果你还没有小程序账号，可以先去注册（点击这里）。 2、下载微信开发工具 如果你还没有下载微信开发工具，请 点这里下载及安装 3、创建小程序项目 如下是创建项目界面，你需要创建一个工作目录 登陆你的小程序账号，...
获取 点击小程序 tabBar 的 事件
hsl200002的博客
05-22 115
获取 点击小程序 tabBar 的 事件
微信小程序，自定义tabbar，模拟器显示，真机演示不显示
weixin_51579731的博客
01-31 202
把skyline这玩意删了，就这破东西导致不显示。
pc端控制渲染小程序之自定义tabBar
我的博客
12-08 757
pc渲染小程序
小程序中动态自定义tabbar
Key_Val的博客
07-09 1426
小程序中动态自定义Tabbar实现 开发需求：根据用户权限显示不同的tabbar* 参考微信文档自定义Tabbar实例（https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html）修改。 《为方便理解，贴出完整代码》 1,app.json中： “tabBar”: { “custom”: true,//自定义tabbar “list”: [ //所有tabbar页面声明 ] }, 2,app.js中
uin-app微信小程序自定义tabBar底部菜单实现简单示例（工作笔记）
最新发布
Java000I的博客
07-11 749
在项目的根目录下创建一个名为的文件夹，并在其中创建所需的文件（如index.jsindex.jsonindex.wxmlindex.wxss在app.js中引入并使用自定义的 tabBar 组件。App({// 在这里可以执行一些启动时的逻辑},'不同角色，控制查看底部菜单权限实现效果1：实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)实现效果2：回收公司!
微信小程序自定义tabbar的坑
iamadelian的博客
04-22 536
自定义tabbar
微信小程序自定义tabBar问题和自定义tabBar实现
a1441574的博客
07-13 5635
微信小程序自定义 tabBar微信小程序自定义 tabBar先简单介绍一下微信官方提供的自定义tabBar 的用法实际使用中出现问题?自助自定义tabBar组件实现custom-tab-bar 代码页一起奉上 微信小程序自定义 tabBar 基础库 2.5.0 开始支持，低版本需做兼容处理。 微信小程序基础库 2.5.0 开始微信官方开放自定义底部 tabBar 组件 。主要是为了让开发者可以更加灵活地设置 tabBar 样式，以满足更多个性化的场景。但是在实际开发者使用微信官方提供的组件 , 适配和兼容
【小程序】自定义tabbar踩坑
不忘初心，坚定道路！
04-30 982
前言 最近做个小程序又用上了自定义tabbar，和上一次使用自定义tabbar已经间隔很久了，这次又踩了些新的经验。 自定义tabbar真机调试或者预览不显示 在开发工具上看一切正常，结果去真机调试或者预览就不显示了。 注意！真机调试不显示是正常情况，预览不显示就不正常，请使用预览查看自定义tabbar显示情况。只要预览能显示，那么发体验版在体验版就能看见。 如果2者都不显示，请注意是否使用了除CoverView与CoverImage以外的标签，如果使用这2以外的标签，是看不见效果，虽然开发工具那模拟
小程序源码（无后台）_自定义tabbar.rar
06-12
【小程序源码（无后台）_自定义tabbar.rar】是一个包含小程序前端源代码的压缩包，主要用于展示和学习如何自定义微信小程序的底部TabBar。TabBar是小程序中常见的一种导航组件，它通常位于页面底部，用于在多个主要...
微信小程序学习用demo：tabbar设计与接口测试；使用cnodeapi
05-04
微信提供了专门的小程序开发平台，包括开发者工具和管理后台。开发者可以通过这个平台注册、创建小程序，进行代码编写、预览、调试以及发布。`.url`文件可能是指向这个开发平台的快捷链接，方便开发者快速访问。 五...
微信小程序tabBar使用
07-10
在微信小程序的开发过程中，`tabBar` 是一个非常关键的组件，它提供了一种用户友好的底部导航栏，方便用户在多个页面之间切换。本文将深入探讨微信小程序中`tabBar`的使用、配置以及与页面生命周期事件的关系。 `...
小程序源码（无后台）_果库.rar
06-12
【小程序源码（无后台）_果库.rar】是一个压缩包文件，主要包含的是一个无需后端服务器支持的小程序的源代码。小程序源码是指用于构建微信小程序、支付宝小程序等平台应用的编程代码，它不依赖于独立的后端服务器，...
小程序最新最全知识点 小白入门
05-08
- **tabBar**：配置了小程序底部的TabBar，至少包含两个Tab，最多五个。 #### 十二、如何封装小程序请求 为了简化网络请求流程，可以对`wx.request`进行封装，使其更加灵活易用。封装后的请求函数通常接受以下参数...
微信小程序面试题.pdf
05-01
- **用户获取门槛**：小程序无需下载安装，用户触达门槛低；传统App需用户主动下载安装。 - **更新迭代**：小程序可以快速迭代更新，无需用户重新下载；传统App每次更新都需要用户重新下载新版本。 #### 2. 微信...
小程序面试必备：生命周期管理与页面路径获取详解
- `onShow`：当小程序从后台切换到前台时触发，可能多次执行，用于管理和恢复用户状态。 - `onHide`：当小程序被隐藏或切换到其他页面时触发，同样可能多次执行。 - `onError`：用于捕获并处理程序运行时的错误，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值