title: 导航栏 TabBar

导航栏 TabBar

导航栏适用场景：需要动态控制标签种类、数量，以及对样式自定义程度高的场景

介绍

导航栏使用微信小程序的 自定义 TabBar 实现。在初次切换页面时，会发生闪烁，该问题是微信小程序自定义 TabBar 底层实现方式导致，不属于 Lin UI 的问题。

基础使用

:::img :::

根据微信小程序官方要求，要使用自定义 TabBar ，需进行如下配置：

1. 在app.json中将tabBar的custom字段指定为true，具体参考此链接

1. 在对应的每个tab页面中引入TabBar组件并在页面中使用，同时指定list属性（该list会生效）

   // 页面 json 文件
   {
      "usingComponents":{
          "l-tab-bar":"/miniprogram_npm/tab-bar/index"
      }
   }

   <!-- 页面 wxml 文件 -->
   <l-tab-bar list="{{list}}" />

   // 页面 js 文件
   Page({
      data:{
          list:[
              {
                  pagePath:"/pages/index/index",
                  text:"首页",
                  iconPath:"/icons/tab-bar/index.png",
                  selectedIconPath:"/icons/tab-bar/index-selected.png"
              }
              ...
          ]
      }
   })

自定义背景图片

导航栏支持使用bg-img属性自定义背景图片，但不支持本地路径，请使用 https 开头的网络路径

<l-tab-bar bg-img="https://imgchr.com/i/Dj7f6P"  list="{{taobaoTabBar}}" />

:::img :::

显示红点

在list数组中传入redDot属性，可以控制导航栏标签是否显示红点或者显示徽标。

redDot 支持传入Boolean/Number的值。当 redDot 为 false 时，不显示红点；为 true 时，显示红点；为数字时，显示徽标。默认为 false。

下图中发现标签为红点,购物车标签为带数字的徽标 :::img :::

导航栏属性

页面列表属性

list接收一个数组，数组中的每项都是一个对象，对象可配置属性如下表

导航栏事件