小程序开发实战案例之三 | 小程序底部导航栏如何设置

小程序中最常见的功能就是底部导航栏了，今天就来看一下怎么设置一个好看的导航栏～这里我们使用的是支付宝官方小程序 IDE 做示范。

官方提供的底部导航栏

第一步：页面创建

一般的小程序会有四个 tab，我们这次也是配置四个 tab 的导航栏。

首先，我们先创建四个页面：

tab 最多可以设置五个，参考 👉 [tabBar 能设置几个 tab]

第二步：在 app.json 中配置底部导航栏的信息

📌 底部导航栏需要在 app.json 文件中通过 tabBar 属性配置，其中：

  • textColor：设置文字颜色
  • selectedColor：设置选中文字颜色
  • backgroundColor：设置背景色
  • items：每个 tab 配置
    • pagePath：对应 tab 页面路径
    • name：对应显示 tab 名称
    • icon：非选中状态下图标路径
    • activeIcon：选中状态下图图标路径

app.json文件代码

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine",
    "pages/sort/sort",
    "pages/basket/basket"
  ],
  "window": {
    "defaultTitle": "购物商城"
  },
  //底部导航栏的信息
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/sort/sort",
        "name": "分类"
      },
      {
        "pagePath": "pages/basket/basket",
        "name": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "name": "我的"
      }
    ]
  }
}

实现效果

这里收集了一下导航栏的常见问题，帮大家避坑：

  • [tabBar 的位置是否支持设置成顶部]
  • [切换 tabBar 时报错 Cannot read property 'getCurrentPages' of undefined 如何处理]
  • [如何监听 tabBar 点击事件]

第三步：美化导航栏

简单的 tab 功能实现后，我们可以通过图标（icon/activeIcon）、颜色等属性对导航栏进行下美化。

先配一个图标，图标大家可以自行搜索，记得找透明底色图片（否则会有白底儿 😅）。

一个 tab 需要配置图标的两个状态，即 选中状态 和 非选中状态，例如：

创建 images 文件夹，把图片拖进去：

稍微美化后的 tabBar 代码：

 "tabBar": {
    "textColor": "#0e932e",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "icon": "images/index.png",
        "activeIcon": "images/index_t.png",
        "name": "首页"
      },
      {
        "pagePath": "pages/sort/sort",
        "icon": "images/sort.png",
        "activeIcon": "images/sort_t.png",
        "name": "分类"
      },
      {
        "pagePath": "pages/basket/basket",
        "icon": "images/basket.png",
        "activeIcon": "images/basket_t.png",
        "name": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "icon": "images/mine.png",
        "activeIcon": "images/mine_t.png",
        "name": "我的"
      }
    ]
  }

实现效果

配置完上面信息之后一个简单的 tab 页面就出来了，基本就可以满足一般小程序的要求了。

tabBar 样式配置的常见问题给大家参考下：

  • [tabBar 的 icon 支持哪些图片格式]
  • [tabBar 的图标推荐大小]
  • [tabbar 是否支持设置字体大小]

第四步：导航栏进阶功能

如果对应的页面需要提示用户进行交互的话，我们就可以用到下面的功能，例如 tab 红点提示、tab 文本提示 。

tab 红点提示

通过 my.showTabBarRedDot 方法给【我的】增加红点提醒

//index.js
Page({
  onLoad(query) {
    my.showTabBarRedDot({
      index: 3,//左边开始，从0计数
      success: function(res) {
        console.log(res);    //{ "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    })
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
  },
})

实现效果

通过 my.hideTabBarRedDot 方法在点击【我的】时候隐藏红点：

//mine.js
Page({
  onLoad() {
    my.hideTabBarRedDot({
      index: 3,//左边开始，从0计数
      success: function(res) {
        console.log(res);   //{ "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    });
  },
});

实现效果

tab 文本提示

通过 my.setTabBarBadge 方法给【购物车】增加数量

<!--index.axml -->
<button size="default" type="primary" onTap="addShop">加入购物车</button>
//index.js
Page({
  addShop(){
    my.setTabBarBadge({
      index: 2,//左边开始，从0计数
      text: '8',//全部显示只支持3个字符
      success(res) {
        console.log(res);
      },
      fail(res) {
        console.log('setTabBarBadge fail: ', res);
      }
    })
  }
});

实现效果

超过 3 个字符效果

如果需要移除文本的话，可以通过 my.removeTabBarBadge 方法实现

//basket.js
Page({
  onLoad() {
    my.removeTabBarBadge({
      index: 2,//左边开始，从0计数
      success: function(res) {
        console.log(res);   // { "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    });
  },
});

实现效果

tabBar 切换的问题大家可以参考：

  • [小程序 tabBar 页面如何透出消息提示]
  • [tabBar 切换时对应页面的 onShow 会不会触发]

自定义底部导航栏

如果想要设置更多能力的 tabBar 的话，可以使用自定义Tab来实现。
⚠ 注意：

  • 使用自定义 tabBar 后，与 tabBar 样式相关的接口都无法使用，例如设置红点（my.showTabBarRedDot ）、修改样式（my.setTabBarStyle）等。
  • 自定义 tabBar 相当于是自定义了一个组件，可以通过 getTabBar 获取自定义 tabBar 实例进行操作。

第一步：创建自定义 tabBar 目录

添加自定义的 tabBar 文件，文件位置和名字要保持一致：

第二步：修改 app.json 文件

配置 app.json 文件，在 tabBar 下添加 customize 属性，设置为 true

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine",
    "pages/sort/sort",
    "pages/basket/basket",
    "pages/member/member"
  ],
  "window": {
    "defaultTitle": "购物商城"
  },
  "tabBar": {
    "customize": true,
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/sort/sort",
        "name": "分类"
      },
       {
        "pagePath": "pages/member/member",
        "name": "会员"
      },
      {
        "pagePath": "pages/basket/basket",
        "name": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "name": "我的"
      }
    ]
  }
}

第三步：编写自定义 tabBar 代码

customize-tab-bar 文件下

index.axml 页面：

<view class="tabbar_box">
  <view class="tabbar_nav {{index === 2 ? 'active' : ''}}" onTap="switchTab" data-index="{{index}}" data-item={{item}} a:for="{{tabBar.items}}" a:key="index">
    <!-- 图标 -->
    <image class="tabbar_icon" src="{{selected === index ? item.activeIcon : item.icon}}"></image>
    <!-- 文字 -->
    <text style="color:{{selected === index ? tabBar.selectedColor : tabBar.textColor}}" >{{item.name}}</text>
  </view>
</view>

index.js 页面：


Component({
  data: {
    selected: 0,
    tabBar: {
      textColor: "#0e932e",
      selectedColor: "#49a9ee",
      items: [
        {
          pagePath: "/pages/index/index",
          name: "首页",
          icon: "/images/index.png",
          activeIcon: "/images/index_t.png",
        },
        {
          pagePath: "/pages/sort/sort",
          name: "分类",
          icon: "/images/sort.png",
          activeIcon: "/images/sort_t.png",
        },
        {
          pagePath: "/pages/member/member",
          name: "",
          icon: "/images/member.png",
          activeIcon: "/images/member_t.png"
        },
        {
          pagePath: "/pages/basket/basket",
          name: "购物车",
          icon: "/images/basket.png",
          activeIcon: "/images/basket_t.png",
        },
        {
          pagePath: "/pages/mine/mine",
          name: "我的",
          icon: "/images/mine.png",
          activeIcon: "/images/mine_t.png",
        }
      ]
    }
  },
  methods: {
    switchTab(e) {
      const {dataset: { item: { pagePath = '' }} = {}} = e.target
      my.switchTab({
        url: pagePath
      })
    }
  }
});

index.acss 页面


.tabbar_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.2);
  background: #ffffff;
  padding-top: 16rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}

.tabbar_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 25rpx;
  height: 100%;
  flex: 1;
  background: #fff;
}

.tabbar_nav.active {
  padding-top: 50rpx;
}

.tabbar_nav.active image {
  width: 100rpx;
  z-index: 2;
  height: 100rpx;
  border-radius: 50%;
  line-height: 100rpx;
  font-size: 50rpx;
  top: -50rpx;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  position: absolute;
}

.tabbar_nav.active::after {
  content: "";
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  top: -60rpx;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.06);
  border-radius: 60rpx;
  background-color: inherit;
  z-index: 0;
}

.tabbar_nav.active::before {
  content: "";
  position: absolute;
  width: 120rpx;
  height: 30rpx;
  bottom: 30rpx;
  left: 0;
  right: 0;
  margin: auto;
  background-color: inherit;
  z-index: 1;
}

.tabbar_icon {
  width: 40rpx;
  height: 40rpx;
}

.tabbar_nav text {
  font-size: 24rpx;
  margin-top: 6rpx;
}

pages/index 文件下

index.js 文件：

Page({
  // 页面显示
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0,
      });
    }
  }
})

实现效果

以上就是关于小程序底部导航栏的所有内容啦，希望对你有所帮助*★,°*:.☆(￣▽￣)/$:*.°★* 。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/243005.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

学习深度强化学习---第3部分----RL蒙特卡罗相关算法

学习深度强化学习---第3部分----RL蒙特卡罗相关算法

文章目录 3.1节 蒙特卡罗法简介3.2节 蒙特卡罗策略评估3.3节 蒙特卡罗强化学习3.4节 异策略蒙特卡罗法 本部分视频所在地址&#xff1a;深度强化学习的理论与实践 3.1节 蒙特卡罗法简介 在其他学科中的蒙特卡罗法是一种抽样的方法。 如果状态转移概率是已知的&#xff0c;则是…
阅读更多...
FMETP STREAM 2.0

FMETP STREAM 2.0

FMETPSTREAM简化了Unity3D中的直播，无需编码。设置和测试仅需5分钟。 "编码器模块"将Unity游戏视图、网络摄像头、桌面、声音和麦克风输入转换为字节数据，使其完美适用于各种流媒体场景。 优化的网络模块支持Server-clients连接类型，并允许您使用单个命令向 Serve…
阅读更多...
Facebook的DINO，无监督模型，可用于分类和分割任务

Facebook的DINO，无监督模型，可用于分类和分割任务

Facebook的DINO 参考&#xff1a;https://blog.csdn.net/hello_dear_you/article/details/133695006 代码&#xff1a;https://github.com/facebookresearch/dino/tree/main DINO本质上是一种自监督学习方法&#xff0c;其核心思想是通过在大规模的无标签数据集上进行对比学习&…
阅读更多...
数据结构与算法：衡量算法好坏的指标——复杂度

数据结构与算法：衡量算法好坏的指标——复杂度

1.复杂度 复杂度&#xff0c;用来分析算法执行过程中&#xff0c;所需要的资源。 时间复杂度是衡量所需要的时间。 空间复杂度&#xff0c;是衡量所需要的(内存)空间。 1.1 时间复杂度 特性 1.衡量算法执行所需时间 2.根据「常数操作」次数推定 3.一般以最大数据量N作为衡量…
阅读更多...
关于标准库中的list（涉及STL的精华-迭代器的底层）

关于标准库中的list（涉及STL的精华-迭代器的底层）

目录 关于list list常见接口实现 STL的精华之迭代器 关于list list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立…
阅读更多...
解析视频美颜SDK的算法：美肤、滤镜与实时处理

解析视频美颜SDK的算法：美肤、滤镜与实时处理

如今&#xff0c;美颜技术在视频处理中扮演着关键的角色&#xff0c;为用户提供更加精致的视觉体验。本文将深入探讨视频美颜SDK的算法&#xff0c;聚焦于美肤、滤镜与实时处理等方面&#xff0c;揭示背后的科技奥秘。 一、美肤算法的魅力 视频美颜的一个核心功能就是美肤&am…
阅读更多...
Linux自动注册zabbix客户端（脚本化）

Linux自动注册zabbix客户端（脚本化）

参考文档&#xff1a;https://www.zabbix.com/documentation/6.0/zh/manual/api/reference/host/create 根据zabbix版本选择适合的API文档参考 #!/bin/bashusername"Admin" password"zabbix" zabbix_api"http://www.qingtongqing.cc:19080/api_json…
阅读更多...
Repo sync 时出现fatal_ couldn‘t find remote ref refs_heads_master问题解决

Repo sync 时出现fatal_ couldn‘t find remote ref refs_heads_master问题解决

repo sync默认的origin分支是master&#xff0c;它默认会依赖master&#xff0c;但是我们的manifests分支是main&#xff0c;需要解决这个问题主要执行下面的几步&#xff1a; 更新repo到最新版本 cd .repo/repo git pull # 更新repo前往git库创建origin master 在manifests…
阅读更多...
大数据与人工智能——神经网络是如何工作的？

大数据与人工智能——神经网络是如何工作的？

大数据与人工智能——神经网络是如何工作的&#xff1f; 我们习惯于去了解所使用工具、中间件的底层原理&#xff0c;本文则旨在帮助大家了解AI模型的底层机制&#xff0c;让大家在学习或应用各种大模型时更加得心应手&#xff0c;更加适合没有AI基础的小伙伴们。 一、GPT与神…
阅读更多...
springMVC-原理及入门案例

springMVC-原理及入门案例

基本介绍 (1)springMVC是以spring为基础&#xff0c;因此在使用时&#xff0c;需要先将spring jar引入. (2)SpringMVC是MVC框架,工作在WEB层&#xff0c;替代Strts2.可以超越struts2框架. &#xff08;3&#xff09;SpringMVC相对于Struts2来说&#xff0c;更加简洁&#xff0…
阅读更多...
【字符串】ABC324E

【字符串】ABC324E

退役啦&#xff0c;接下来的博客全是图一乐啦 E - Joint Two Strings 题意 思路 统计两个指针的方案数一定是枚举一个&#xff0c;统计另一个 然后因为拼起来之后要包含 t 这个字符串&#xff0c;隐隐约约会感觉到和前缀后缀子序列有关 考虑预处理每个 s[i] 的最长公共前…
阅读更多...
本地 SIEM 与云原生 SIEM：哪一种适合您？

本地 SIEM 与云原生 SIEM：哪一种适合您？

安全信息和事件管理 (SIEM) 解决方案对于各种规模的组织监控其环境中的安全威胁至关重要。 SIEM 解决方案收集并审查来自不同来源&#xff08;例如防火墙、入侵检测系统和 Web 服务器&#xff09;的安全日志。随后可以利用这些数据来检测潜在威胁、检查安全事件并针对网络攻击…
阅读更多...
某大厂机器视觉工程师被坑100万！竞业协议到底有多少坑？

某大厂机器视觉工程师被坑100万！竞业协议到底有多少坑？

特别注意竞业协议是企业与员工双方共同意愿下签订的。如果还在这个行业做&#xff0c;尽量不要去签订竞业协议。 今天看到&#xff0c;看到某大厂员工因为违反竞业协议&#xff0c;被要求赔偿100多万还要返还期间发放竞业协议的补偿金&#xff1b; 实不相瞒&#xff0c;我也被…
阅读更多...
java集合的迭代器与遍历

java集合的迭代器与遍历

文章目录 迭代器Iterator1、什么是Iterator2&#xff0c;iterator接口的API3、Irerator()方法细节解释4. Irerator的原理示意图5. forEach循环与Iterator遍历的区别与联系 ListIterator1.ListIterator的概述(1) 概念(2) 解析 2.ListIterator的生成3.ListIterator的API4.ListIte…
阅读更多...
uniapp 单选按钮 选中默认设备

uniapp 单选按钮 选中默认设备

需求1&#xff1a;选中默认设备&#xff0c;113 和114 和139都可以选中一个默认设备 选中多个默认设备方法&#xff1a; async toSwitch(typeItem, title) {const res await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)if (!res) {this.common.toast(切换默…
阅读更多...
空气污染大屏，UI可视化大屏设计（PSD源文件）

空气污染大屏，UI可视化大屏设计（PSD源文件）

大屏组件可以让UI设计师的工作更加便捷&#xff0c;使其更高效快速的完成设计任务。现分享科技空气污染大数据、空气污染大数据平台、大气环境信息资源中心、大气检测大数据中心、环境信息资源中心界面的大屏Photoshop源文件&#xff0c;开箱即用&#xff01; 若需 更多行业 相…
阅读更多...
input 获取焦点后样式的修改

input 获取焦点后样式的修改

一、实现目标 1.没有获取焦点时样子 2.获取焦点时 代码&#xff1a; <input class"input"placeholder"请输入关键字" input"loadNode" />css .input {border-radius: 14px;border:1px solid #e4e4e4;margin: 5px;margin-top: 10px;wi…
阅读更多...
Java - 异常（三）- 声明异常（throws）和手动抛出异常throw

Java - 异常（三）- 声明异常（throws）和手动抛出异常throw

目录 6.3 方式2&#xff1a;声明异常&#xff08;throws&#xff09; 6.4 手动抛出异常throw 6.4.1 概述 6.4.2 使用格式&#xff1a; 6.4.3 实例代码 6.4.4 为什么要手动抛出异常对象&#xff1f; 6.4.5 如何理解“自动”和“手动” 抛出异常对象 6.4.6 注意点 ❓面试…
阅读更多...
基于SSM架构的超市管理系统设计

基于SSM架构的超市管理系统设计

基于SSM架构的超市管理系统设计 目录 基于SSM架构的超市管理系统设计 1 环境及工具1.1 IDEA软件安装1.2 JDK环境配置1.3 MySQL数据库安装1.3.1常规情况1.3.2非常规情况 1.4 Tomcat安装 2 部署与设计2.1 数据库信息创建2.2项目创建与部署 3 相关说明4 功能操作说明4.1 管理员操作…
阅读更多...
物联网在能源管理中的应用——青创智通工业物联网解决方案

物联网在能源管理中的应用——青创智通工业物联网解决方案

随着全球能源资源的日益紧张和环境问题的日益突出&#xff0c;能源管理已成为当今社会的重要议题。物联网技术的快速发展为能源管理提供了新的解决方案。本文将介绍物联网在能源管理中的应用及其优势。 一、物联网在能源管理中的应用 1. 智能电网 智能电网是物联网在能源管理中…
阅读更多...
最新文章

Copyright @ 2022~2023