使用colorUI内置的操作条自定义的tabBar

更新记录

0.1（2021-03-26）

2021-03-26---第一版（测试了H5和微信小程序-支持）

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
×	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	×	√	√	√

写的很菜，不喜勿喷，谢谢！

需要引入colorUI才能使用，需要引入colorUI才能使用，需要引入colorUI才能使用 colorUI下载地址: https://ext.dcloud.net.cn/plugin?id=239

1、只试了H5和微信小程序还有APP，已知兼容了H5和微信小程序 2、本来只是想兼容APP端的，在兼容其他端的，现在好了，APP端不兼容了 3、会在努力的，写的精细一点和把APP端兼容的 4、问题:使用自定义tabBar用了uni.reLaunch去往自定义的tabBar页面,在该页面刷新会显示左上角返回,因为我不要uni-app原生的顶部我在pages.json使用"navigationStyle": "custom"去除了,解决了这个问题

使用说明，在tabBar.vue页面下retuen的tabbarList里填好要跳转的页面地址，填好每个页面的对应的select，直接引入即可.

示例如下:下载插件,放入components目录下,并且按照下面的index.vue引入使用即可

<-------------index.vue------------------->

<-------------index.vue------------------->

首页分类 <button class="cu-btn cuIcon-camerafill bg-green shadow"></button> 社区

<view class="action" :class="select === 3 ? 'active' : 'default'" @click="tabbarClick(tabbarList[3].path)">
    <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
    </view>
    购物车
</view>
<view class="action" :class="select === 4 ? 'active' : 'default'" @click="tabbarClick(tabbarList[4].path)">
    <view class="cuIcon-my">
        <view class="cu-tag badge"></view>
    </view>
    我的
</view>