打造个性化微信小程序：利用ColorUI自定义底部导航栏TabBar

2023-09-26 15:01:44

引言：
在微信小程序开发中，底部导航栏（TabBar）是不可或缺的重要元素，它为用户提供了在不同页面之间快速切换的便捷方式。默认的TabBar样式可能无法满足您的个性化需求，因此本文将介绍如何使用ColorUI来自定义TabBar的样式，让您的微信小程序更加独特且美观。

ColorUI简介：
ColorUI是一个基于微信小程序原生组件的CSS框架，它提供了丰富的样式和组件，可以帮助您快速搭建出美观且实用的微信小程序。ColorUI的优点包括：

丰富的样式库： ColorUI提供了多种预设的样式主题和组件样式，您可以直接使用或根据需要进行修改。
灵活的自定义能力： ColorUI允许您对样式进行自定义修改，您可以通过修改CSS代码来实现自己想要的样式效果。
良好的兼容性： ColorUI兼容所有微信小程序版本，并且可以在不同的平台上运行。

自定义TabBar样式：

安装ColorUI：
- 在您的微信小程序项目中，安装ColorUI npm包：

npm install colorui-wxapp --save

将ColorUI的样式文件导入到您的项目中：

import './colorui/dist/css/colorui.css'

创建TabBar组件：
- 在您的项目中创建一个TabBar组件，并将其注册到app.json文件中。

// tab-bar.js
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './tab-bar.scss'

export default class TabBar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selected: 0
    }
  }

  handleClick(index) {
    this.setState({
      selected: index
    })

    Taro.switchTab({
      url: '/pages/index/' + index
    })
  }

  render() {
    const { selected } = this.state

    return (
      <View className='tab-bar'>
        <View className='tab-item' onClick={this.handleClick.bind(this, 0)}>
          <Text className={selected === 0 ? 'active' : ''}>首页</Text>
        </View>
        <View className='tab-item' onClick={this.handleClick.bind(this, 1)}>
          <Text className={selected === 1 ? 'active' : ''}>分类</Text>
        </View>
        <View className='tab-item' onClick={this.handleClick.bind(this, 2)}>
          <Text className={selected === 2 ? 'active' : ''}>购物车</Text>
        </View>
        <View className='tab-item' onClick={this.handleClick.bind(this, 3)}>
          <Text className={selected === 3 ? 'active' : ''}>个人中心</Text>
        </View>
      </View>
    )
  }
}

在app.json文件中注册TabBar组件：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": "default",
      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/tab-bar/home.png",
            "selectedIconPath": "images/tab-bar/home-active.png"
          },
          {
            "pagePath": "pages/index/category",
            "text": "分类",
            "iconPath": "images/tab-bar/category.png",
            "selectedIconPath": "images/tab-bar/category-active.png"
          },
          {
            "pagePath": "pages/index/cart",
            "text": "购物车",
            "iconPath": "images/tab-bar/cart.png",
            "selectedIconPath": "images/tab-bar/cart-active.png"
          },
          {
            "pagePath": "pages/index/user",
            "text": "个人中心",
            "iconPath": "images/tab-bar/user.png",
            "selectedIconPath": "images/tab-bar/user-active.png"
          }
        ]
      }
    }
  ],
  "tabBar": {
    "custom": true,
    "color": "#000",
    "selectedColor": "#333",
    "backgroundColor": "#fff",
    "borderStyle": "black"
  }
}

自定义TabBar样式：
- 在您的项目中创建一个scss文件，并将其导入到TabBar组件中。

// tab-bar.scss
.tab-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #f5f5f5;
  border-top: 1px solid #ccc;
}

.tab-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 50px;
  color: #666;
}

.tab-item.active {
  color: #333;
}

.tab-item text {
  font-size: 12px;
  margin-top: 5px;
}