colorui-uniapp对于底部操作条的使用

一开始觉得这个比较简单，后来看了一下文档。自己实现的时候还是会有问题，你会发现效果有了，位置不对，不能产生点击后的效果，感觉就像一张图片，下面是效果的简单实现。

照着直接用上去就可以了照着直接用上去就可以了

<template>
    <view class="cu-bar tabbar margin-bottom-xs bg-white foot">
        <view class="action text-green">
            <view class="cuIcon-homefill"></view> 首页
        </view>
        <view class="action text-gray">
            <view class="cuIcon-similar" @click="changpage()"></view> 分类
        </view>
        <view class="action text-gray add-action">
            <button class="cu-btn cuIcon-add bg-green shadow"></button>
            发布
        </view>
        <view class="action text-gray">
            <view class="cuIcon-cart">
                <view class="cu-tag badge">99</view>
            </view>
            购物车
        </view>
        <view class="action text-gray">
            <view class="cuIcon-my">
                <view class="cu-tag badge"></view>
            </view>
            我的
        </view>
    </view>
</template>

操作条相关class

• cu-bar 底部操作条必选值 ——
• tabbar 底部操作条必选值 ——
• foot 固定定位在页面底部 ——
• add-action 小程序tabBar的midButton ——
• shop 购物操作条必选值 ——
• submit 提交按钮 ——
• border-title 带下边框样式的标题 ——
• sub-title 带副标题样式的标题 ——
• self-end css属性align-self: flex-end; ——
• search-form 搜索框 ——
• input 输入框样式 ——

做完这些可以直接封装起来，作为一个全局组件，想在哪里用就可以在哪里用，这个比较简单就不说了。还有一种方法可以直接在主页中引入多个页面，在主页面进行切换显示。这样可以解决切换时闪烁的问题。主要是通过点击导航栏的内容，对页面数据进行修改，用v-if判断这个改变的数据，来实现页面的切换与导航栏图标的变化，我这里就简单的做了一下。

<template>
    <view>
        <cu-custom bgColor="bg-gradual-blue" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">导航栏</block>
        </cu-custom>
        <homePage></homePage>
        <tabBar></tabBar>
    </view>
</template>
<script>
    import homePage from "./pages/home_page.vue";
    export default {
        data() {
            return {
            }
        },
        components: {
            homePage
        },
        onLoad() {
        },
        methods: {
        }
    }
</script>

就是这些了，嘿嘿，给大家推荐一下一个简单的教程https://blog.csdn.net/miao_yf/article/details/102971767#layout%E5%B8%83%E5%B1%80
个人感觉写的不错