【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)

简介: 【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)

开始前,请先完成底部导航的开发,详见

【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

https://sunshinehu.blog.csdn.net/article/details/128705866

显然,纯文字的底部导航有点low,还是需要有图标的才酷,下面我们一起来实现

1. 修改 tabBar 配置

在 app.json 的 tabBar 配置中新增

"custom": true,

即启用用户自定义的 tabar,但之前的 list 配置留着,别删 !!!

2. 添加自定义的 tabBar 代码

在项目目录下新建文件夹 custom-tab-bar (必须是这个名字!)

文件夹中依次创建以下文件

custom-tab-bar\data.js

export default [
  {
    icon: 'home',
    text: '首页',
    url: 'pages/index/index',
  },
  {
    icon: 'usergroup',
    text: '家庭成员',
    url: 'pages/member/index',
  },
  {
    icon: 'tips',
    text: '圆梦宝典',
    url: 'pages/bible/index',
  },
  {
    icon: 'user',
    text: '我的世界',
    url: 'pages/me/index',
  },
];

custom-tab-bar\index.js

import TabMenu from './data';
Component({
  data: {
    active: 0,
    list: TabMenu,
  },

  methods: {
    onChange(event) {
      this.setData({ active: event.detail.value });
      wx.switchTab({
        url: this.data.list[event.detail.value].url.startsWith('/')
          ? this.data.list[event.detail.value].url
          : `/${this.data.list[event.detail.value].url}`,
      });
    },

    init() {
      const page = getCurrentPages().pop();
      const route = page ? page.route.split('?')[0] : '';
      const active = this.data.list.findIndex(
        (item) =>
          (item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
          `${route}`,
      );
      this.setData({ active });
    },
  },
});

custom-tab-bar\index.json

{
  "component": true,
  "usingComponents": {
    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
    "t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item",
    "t-icon": "tdesign-miniprogram/icon/icon"
  }
}

custom-tab-bar\index.wxml

<t-tab-bar
 value="{{active}}"
 bindchange="onChange"
 split="{{false}}"
>
  <t-tab-bar-item
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="index"
  >
    <view class="custom-tab-bar-wrapper">
      <t-icon name="{{item.icon}}" size="48rpx" />
      <view class="text">{{ item.text }}</view>
    </view>
  </t-tab-bar-item>
</t-tab-bar>

custom-tab-bar\index.wxss

.custom-tab-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-tab-bar-wrapper .text {
  font-size: 20rpx;
}

3. 解决导航高亮需点击两次的问题

本以为通过以上两步就ok了,结果实际使用时,会发现切换底部导航时,页面切换了,但导航没有变高亮,需要再多点击一次才行……

解决方案如下:

在每个页面的 .js 文件中添加

  onShow() {
    this.getTabBar().init();
  },

即在每次页面显示时,对底部导航进行一次初始化。

目录
相关文章
|
8天前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
技术小白如何利用DeepSeek半小时开发微信小程序?
|
1天前
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
24 10
|
14天前
|
人工智能 自然语言处理 小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
|
3月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
16天前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
16天前
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
2月前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
69 1
|
2月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
94 0
|
3月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
54 0