微信小程序--》tabBar底部栏

news2025/2/26 10:07:09

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：微信小程序

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

       ⚓经过web前端开发的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。

目录

🍇什么是tabBar

🍈tabBar的6个组成部分

🍉tabBar配置项

tab项的配置选项

🍊自定义tabBar

配置信息

添加tabBar代码文件

编写tabBar代码

自定义tabBar图标

渲染tabBar的数字徽标

tabBar页面切换及其样式设置

🍇什么是tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分成两类，分别是：底部 tabBar 和 顶部 tabBar 简言之：就是位于小程序底部或顶部的调整导航栏，与微信底部导航栏类似。

注意：

tabBar中只能配置最少2个、最多5个tab页签

当渲染顶部的tabBar时，不显示icon，只显示文本

🍈tabBar的6个组成部分

①backgroundColor：tabBar的背景色

②selectedIconPath：选中时的图片路径

③borderStyle：tabBar上边框的颜色

④iconPath：未选中时的图片路径

⑤selectedColor：tab上的文字选中时的颜色

⑥color：tab上文字的默认（未选中）颜色

🍉tabBar配置项

属性类型必填项默认值描述
positionString否bottomtabBar的位置，仅支持bottom/top
borderStyleString否blacktabBar上边框颜色，仅支持black/white
colorHexColor否无tab上文字的默认（未选中）颜色
selectedColorHexColor否无tab上文字的选中颜色
backgroundColorHexColor否无tabBar的背景色
listArray是无tab页签的列表(最少2个，最多5个)

tab项的配置选项

在list数组里面填写的tab页签，每个tab页签可以配置如下配置选项：

属性类型必填描述
pagePathString是页面路径，页面必须在pages中预先定义
textString是tab上显示的文字
iconPathString否未选中时的图标路径；当position为top时，不显示icon
selectedIconPathString否选中时的图标路径；当position为top时，不显示icon
{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/person/person",
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#008c8c",
    "navigationBarTitleText": "我的微信小程序",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#0f0",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "./images/home.png",
      "selectedIconPath": "./images/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "./images/message.png",
      "selectedIconPath": "./images/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "./images/contact.png",
      "selectedIconPath": "./images/contact-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

🍊自定义tabBar

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。详细了解的话请参考官方文档说明：自定义tabBar

配置信息

官方文档明确说明：

为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染，所有下图的list是不用删除的。

添加tabBar代码文件

注意：添加的文件夹名字必须要和官方文件名字一样，不能乱修改名字；然后右键文件夹选择新建Component输入index 即可。

只要我们在app.json中声明了custom:true同时又创建了对应的custom-tab-bar对应的文件结构，微信小程序会自动识别custom-tab-bar对应的组件，把它的结构渲染到页面上，当作我们的tabBar

编写tabBar代码

我们自定义 tabBar 可以通过 Vant 组件库 里面的 tabBar 标签栏样式来快速便捷的创建我们的tabBar代码，如何配置 Vant 组件库的具体过程就不在演示了，详情请看一下如下这篇文章：

Vant组件库的安装及使用

自定义tabBar图标

Vant组件库也为我们提供了具体的方法：可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar-item info="3">
  <image slot="icon" src="/images/home.png" mode="aspectFit" style="width: 30px; height: 18px;"/>
  <image slot="icon-active" src="/images/home-active.png" mode="aspectFit" style="width: 30px; height: 18px;"/>
  首页
</van-tabbar-item>

虽然我们可以自定义图标，但是上面的自定义一个图标就要写好多代码，能不能有种方法可以简便的自定义我们的图标，可以的。我们可以通过循环的形式将我们的tabbar-item给我们渲染出来。

首先我们需要将 list 里面的文件复制到自定义组件文件夹下 .js文件下的data里面：

// .wxml
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
    <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
    {{item.text}}
  </van-tabbar-item>>
</van-tabbar>

渲染tabBar的数字徽标

我们可以通过设置 info 属性来渲染tabBar上的数字徽标，如下图代码图片所示：

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="2">
    <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
    <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
    {{item.text}}
  </van-tabbar-item>>
</van-tabbar>

这样做的结果虽然能达到数字徽标效果的出现，但显然是把它写死了，所以我们要进行动态的绑定，这里我们可以参考一下微信官方文档的介绍。

// custom-tab-bar/index.wxml
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
    <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
    <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
    {{item.text}}
  </van-tabbar-item>>
</van-tabbar>

// custom-tab-bar/index.js
import {storeBindingsBehavior} from '../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
import {store} from '../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      sum: "sum",
    },
    actions: {
    },
  },
  observers:{
    'sum':function(val){
      // console.log(val);
      this.setData({
       'list[1].info':val>0?val:0 //三元运算符，如果数字徽标的数值小于零，就赋值为0
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active:0,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png",
      info:2
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

tabBar页面切换及其样式设置

我们将active引入到store实例对象当中，来动态的获取页面的索引值；在我们进行自定义tabBar的时候切换页面可能会出现闪烁问题，可自行百度，这里仅以举例为主。

//.wxml
<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
    <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
    <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
    {{item.text}}
  </van-tabbar-item>>
</van-tabbar>

//.js
// custom-tab-bar/index.js
import {storeBindingsBehavior} from '../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
import {store} from '../store/store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      sum: "sum",
      active:'activeTabBarIndex',
    },
    actions: {
      updateActive:'updateActiveTabBarIndex'
    },
  },
  observers:{
    'sum':function(val){
      // console.log(val);
      this.setData({
       'list[1].info':val>0?val:0 //三元运算符，如果数字徽标的数值小于零，就赋值为0
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    "list": [{
      "pagePath": "/pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },
    {
      "pagePath": "/pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png",
      info:2
    },
    {
      "pagePath": "/pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail })
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })

    },
  }
})

//store.js
// 在这个 JS 文件中，专门来创建 Store 的实例对象
import {observable,action} from '../miniprogram/miniprogram_npm/mobx-miniprogram/index'

export const store = observable({
  // 数据字段
  numA:1,
  numB:2,
  activeTabBarIndex:0,
  // 计算属性
  get sum(){
    return this.numA + this.numB
  },
  // actions 函数，专门来修改 store 中数据的值
  updateNum1:action(function(step){
    this.numA += step
  }),
  updateNum2:action(function(step){
    this.numB += step
  }),
  updateActiveTabBarIndex:action(function(index){
    this.activeTabBarIndex = index
  })
})

当然我们也可以设置tabBar选中项的文本颜色：

其他具体的tabBar样式设置可自行参考 Vant组件库，tabBar底部栏的讲解今天就到这了。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

搭建博客，基于vue3 的 vitepress 轻松搞定

搭建博客，基于vue3 的 vitepress 轻松搞定

Ⅰ、什么是vitepress &#x1f48e; vitepress 使用场景 简单的说 &#xff0c;只要 会用 markdown 语法&#xff0c;就能构建自己的 「博客、笔记、使用文档」等系统 &#xff1b; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…
阅读更多...
【Vue脚手架安装教程】

【Vue脚手架安装教程】

文章目录前言一、安装Node.js二、配置淘宝镜像安装cnpm,将npm设置为淘宝镜像&#xff1a;二、安装vue/cli检查是否安装成功&#xff1a; vue -V 或者 vue --version ![在这里插入图片描述](https://img-blog.csdnimg.cn/7f66366eba81456388fcf28871db0650.png)三、 创建一个vue…
阅读更多...
Chrome浏览器的跨域设置

Chrome浏览器的跨域设置

做前后端分离的开发的时候&#xff0c;出于一些原因往往需要将浏览器设置成支持跨域的模式&#xff0c;而且chrome浏览器支持可跨域的设置&#xff0c;但是新版本的chrome浏览器提高了跨域设置的门槛&#xff0c;原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设…
阅读更多...
webpack的面试题（吐血整理）

webpack的面试题（吐血整理）

以下为整理的webpack面试题&#xff0c;如有不足之处&#xff0c;还请大家多多指正。 一、webpack的构建流程 二、对webpack的理解 webpack是一个打包模块化js的工具&#xff0c;在webpack里一切文件皆模块&#xff0c;通过loader转换文件&#xff0c;通过plugin注入钩子&#…
阅读更多...
最常见的六种跨域解决方案

最常见的六种跨域解决方案

目录&#xff1a; 前言&#xff1a;什么是跨域&#xff1f;JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言&#xff1a;什么是跨域&#xff1f; 跨域就是当在页面上发送ajax请求时&#xff0c;由于浏览器同源策略的限制&#xff0c;要求当前页面和…
阅读更多...
jQuery模态弹窗插件(jquery-confirm)

jQuery模态弹窗插件(jquery-confirm)

前言 今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件&#xff1a;jquery-confirm&#xff0c;它包含Bootstrap,Material等多种主题供选择。 如果你的前端项目中还在使用jQuery&#xff0c;那么jquery-confirm是你模态弹窗的完美选择。 下面我们就来零距离感受…
阅读更多...
IDEA如何运行SpringBoot项目（超详细截图）

IDEA如何运行SpringBoot项目（超详细截图）

【辰兮要努力】&#xff1a;hello你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行&#xff01; 博客来源于项目以及编程中遇到的问题总结&#xff0c;偶尔会有读书分享&#xff0c;我会陆续更新Java前端、后台、…
阅读更多...
vue中组件的props属性（详）

vue中组件的props属性（详）

今天这篇文章&#xff0c;让你彻底学会props属性…… props主要用于组件的传值&#xff0c;他的工作就是为了接收外面传过来的数据&#xff0c;与data、el、ref是一个级别的配置项。 问题一&#xff1a;那props具体是怎么使用呢&#xff1f;原理又是什么呢&#xff1f;往下看…
阅读更多...
css绘制3D炫动ikun

css绘制3D炫动ikun

今天做一个3D版的ikun。 先准备图片一张 代码浅析 页面整体div.contrainer,舞台div.stage,控制盒子div.control,图片盒子div.imgWrap,js载入div.img列表。 <div class"contrainer"><div class"stage"><div class"control">…
阅读更多...
vue项目引入svg图标（完整步骤）

vue项目引入svg图标（完整步骤）

1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖。 npm安装&#xff1a;npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹&#xff0c;在icons文件夹下创建svg文件夹存放本地svg图标。 3. vue.config.js 中配置svg图片 vue.c…
阅读更多...
vue中使用echarts实现动态数据绑定、获取后端接口数据

vue中使用echarts实现动态数据绑定、获取后端接口数据

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图&#xff0c;在项目中我们肯定是需要获取后端接口&#xff0c;将后端返回的数据显示在图表上&#xff0c;所以这次就记录一下如何实现echarts的动态数据绑定。 简单来讲&#xff0c;就是从接口获取到的数据&a…
阅读更多...
Vue生命周期总结（四个阶段，八个钩子函数）

Vue生命周期总结（四个阶段，八个钩子函数）

生命周期就是组件或者实例&#xff0c;从创建到被销毁&#xff08;初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载&#xff09;的一系列过程&#xff0c;我们称这是Vue的生命周期 文章目录一、Vue的生命周期阶段二、生命周期钩子函数1. beforeCreate2. created3. be…
阅读更多...
ES6+--》熟知JS中的async函数

ES6+--》熟知JS中的async函数

目录 async函数 await 表达式 async使用形式 async读取文件 async发送AJAX请求 与生成器(Generator)相比 async函数 async函数的返回值为 promise 对象&#xff0c;promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便&#xff0c;简而…
阅读更多...
前端开发常用哪些工具软件？

前端开发常用哪些工具软件？

前端开发必备工具&#xff0c;一篇文章一网打尽 文章目录 一、前端提高“生产力”工具 1.WebStorm 2. 远程开发 - VSCode 3. 接口测试 - Postman 4.API在线文档生成和测试 - SwaggerUI 5.抓包工具 - Wireshark 6.通用数据库管理 - DBeaver 7.MD编辑器 - Typora 8.虚拟…
阅读更多...
【数字孪生】UE4虚幻引擎与前端Web页面的结合

【数字孪生】UE4虚幻引擎与前端Web页面的结合

目录介绍基础准备鼠标穿透设置备注介绍 UE初学者&#xff0c;非专业UE工程师&#xff0c;在项目中需要使用UE4结合前端页面完成三维场景与前端图表的联动效果&#xff0c;自学总结方法&#xff0c;使用的版本为UE4.26。 基础准备 1. 使用Vue、Echarts创建前端页面&#xff0…
阅读更多...
异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func

异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func

异常&#xff1a;TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func 问题解决 今天我在给博客添加樱花飘落的特效的时候 下载并引入了一个JS 之后打包执行的时候 发现樱花不会动了 检查报错发现是文章标题的报错…
阅读更多...
事件监听 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）

事件监听 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）

目录 一、效果展示 二、实现步骤 三、涉及要点 1. Vue 语法 v-show 2. 获取窗口到元素顶端的距离 3. 监听事件 一、效果展示 最近在做项目时有一个网页渲染是这样的&#xff0c;某一个元素在开始不显示&#xff0c;只有当页面滑动到指定的位置时才显示该元素。效果如下&a…
阅读更多...
基于物联网的智慧农业监测系统（前端界面有web端和微信小程序端）

基于物联网的智慧农业监测系统（前端界面有web端和微信小程序端）

摘要 农业是国民经济的基础&#xff0c;在国家经济发展中有着不可替代的重要作用。随着物联网技术的快速发展&#xff0c;智慧农业已成为了现代农业发展的新方向。基于此&#xff0c;本文设计并实现了一套基于物联网的智慧农业监测系统&#xff0c;系统采用ESP32作为主控板&am…
阅读更多...
Vue组合式API

Vue组合式API

目录 一. 为什么要使用Composition API 1.1.一个Options API实例 1.2.Options API存在的问题 1.3.Composition API简介 二.Composition API 2.1.setup()入口 2.2.ref 响应式监听 2.3.reactive与toRefs 2.4.computed的用法 2.5.watch的用法 2.6.setup()参数 2.6.1.p…
阅读更多...
前端如何将项目部署到服务器（Nginx）

前端如何将项目部署到服务器（Nginx）

文章目录一、准备环境二、安装Nginx1、 安装Nginx依赖2、下载Nginx3、解压下载好的Nginx 压缩包4、编译安装Nginx5、启动Nginx服务三、操作步骤1、使用Xshell连接服务器2、上传静态资源文件3、 配置Nginx4、 重启Nginx服务我们在会开发项目的同时&#xff0c;也应该了解一下前端…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023