写在前面

本篇文章是微信小程序开发入门的第二十二篇，介绍小程序开发如何使用微信小程序组件库：TDesign

底部tab栏我们已经写好了，每个tab栏对应的页面也已经创建好，现在点击每个tab也都能正常切换页面，我们先来开发管理中心tab，按照我们的思路，这个tab下面有五个模块：1、水果管理；2、水果类型管理；3、水果销售记录；4、库存警报设置；5、库存警报记录

在开发开始前，我们先引入一下微信小程序组件库：TDesign，虽然小程序官方提供了一些组件，但是这些组件样式比较普通，种类也不是很丰富。

安装TDesign

打开项目调试器，打开终端，点击“新建一个终端”，先输入命令：cd miniprogram，再输入命令：npm init -y，然后输入命令：npm i tdesign-miniprogram -S --production，都执行完成后，点击右上角：工具-构建npm

使用TDesign

打开manage.json文件，编写代码如下，使用TDesign的组件前先要在json文件中引入一下才能正常使用，navigationBarTitleText表示导航栏的标题，navigationBarBackgroundColor表示导航栏的背景颜色，navigationBarTextStyle表示导航栏的文字颜色：

{
  "usingComponents": {
    "t-icon": "tdesign-miniprogram/icon/icon"
  },
  "navigationBarTitleText": "管理中心",
  "navigationBarBackgroundColor": "#FFFFFF",
  "navigationBarTextStyle": "black"
}

再打开manage.wxml文件，编写代码如下，我们在页面上循环显示manageList，并且给每个item绑定onManageItem事件，同时给事件传参data-path="{{item.path}}"：

<view class="manage_page">
  <view class="manage_ul">
    <view class="manage_li" wx:for="{{manageList}}" wx:key="index" bindtap="onManageItem" data-path="{{item.path}}">
      <view class="li_label">
        {{item.label}}
      </view>
      <view class="li_arrow">
        <t-icon name="chevron-right" size="48rpx" />
      </view>
    </view>
  </view>
</view>

manageList和onManageItem事件定义在manage.js文件中，manage.js文件代码如下：

Page({
  data: {
    manageList: [{
        label: '水果管理',
        path: '/pages/manage/fruit-manage/fruit-manage'
      },
      {
        label: '水果类型管理',
        path: '/pages/manage/fruit-type-manage/fruit-type-manage'
      },
      {
        label: '水果销售记录',
        path: '/pages/manage/fruit-sale-record/fruit-sale-record'
      },
      {
        label: '库存警报设置',
        path: '/pages/manage/alarm-set/alarm-set'
      },
      {
        label: '库存警报记录',
        path: '/pages/manage/alarm-record/alarm-record'
      },
    ]
  },
  onLoad(options) {},
  onManageItem(e) {
    wx.navigateTo({
      url: e.currentTarget.dataset.path,
    })
  },
})

同时包括css样式代码，在文件manage.wxss中：

.manage_page {
  width: 750rpx;
}

.manage_ul {
  margin-top: 32rpx;
}

.manage_li {
  display: flex;
  justify-content: space-between;
  height: 48rpx;
  line-height: 48rpx;
  padding: 24rpx 16px;
  background-color: #fff;
  margin-bottom: 16rpx;
}

.li_arrow {
  color: #bfbfbf;
}

最终页面效果如下：

点击每个Item会跳转到相应的页面，比如点击水果管理，页面会跳转到/pages/manage/fruit-manage/fruit-manage

写在最后

以上就是小程序开发增加底部tab栏的代码的全部内容