uin-app微信小程序自定义tabBar底部菜单实现简单示例(工作笔记)

在微信小程序中实现自定义 tabBar 可以为你的应用提供更加灵活和个性化的底部导航菜单。由于微信小程序的官方 tabBar 配置功能有限,自定义 tabBar 成为了很多开发者实现复杂底部导航的选择。以下是一个简单的示例,说明如何在小程序中实现自定义 tabBar

步骤 1: 配置 app.json

首先,你需要在 app.json 中配置 tabBar 的基础信息,但 custom 字段需要设置为 true 来启用自定义 tabBar

json 复制代码
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/profile/profile"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ],
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black"
  }
}

步骤 2: 创建自定义 tabBar 组件

在项目的根目录下创建一个名为 custom-tab-bar 的文件夹,并在其中创建所需的文件(如 index.jsindex.jsonindex.wxmlindex.wxss)。

index.js

这里可以处理逻辑,比如根据当前页面切换 tab。

javascript 复制代码
Component({
  data: {
    selected: 0,
    list: [{
      pagePath: '/pages/index/index',
      text: '首页'
    }, {
      pagePath: '/pages/logs/logs',
      text: '日志'
    }, {
      pagePath: '/pages/profile/profile',
      text: '我的'
    }]
  },
  methods: {
    switchTab: function(e) {
      const data = e.currentTarget.dataset;
      if (this.data.selected === data.index) return;
      wx.switchTab({url: data.path});
    },
    onShow: function(e) {
      // 当 tabBar 显示时触发,可以根据需要获取当前页面路径
      const { path } = getCurrentPages().pop();
      this.setData({
        selected: this.data.list.findIndex(tab => tab.pagePath === path)
      });
    }
  }
});
index.json

定义组件的配置信息。

json 复制代码
{
  "usingComponents": {}
}
index.wxml

定义 tabBar 的结构。

html 复制代码
<view class="tab-bar">
  <block wx:for="{{list}}" wx:key="index" wx:for-index="idx">
    <view class="tab-item {{selected === idx ? 'active' : ''}}" data-path="{{item.pagePath}}" data-index="{{idx}}" bindtap="switchTab">
      {{item.text}}
    </view>
  </block>
</view>
index.wxss

添加样式。

css 复制代码
.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}

.tab-item {
  padding: 10px 0;
  text-align: center;
}

.tab-item.active {
  color: #3cc51f;
}

步骤 3: 在 app.js 中使用自定义 tabBar

app.js 中引入并使用自定义的 tabBar 组件。

javascript 复制代码
App({
  onLaunch: function () {
    // 在这里可以执行一些启动时的逻辑
  },
  usingComponents: {
    '不同角色,控制查看底部菜单权限
    实现效果1:实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)
实现效果2:回收公司
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/da1d7b225c064d3ab058176211f65833.png)
相关推荐
花海少爷6 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
尘浮生32 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
sinat_3842410933 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
GIS瞧葩菜1 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
程序猿看视界1 小时前
如何在 UniApp 中实现 iOS 版本更新检测
ios·uniapp·版本更新
美式小田2 小时前
单片机学习笔记 9. 8×8LED点阵屏
笔记·单片机·嵌入式硬件·学习
zhang-zan2 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium