底部操作条 | 我的文档库

温馨提示

我们可以使用 Bar 操作条自定义项目底部的 tabBar，就拿官方示例代码来举例。想要使用自定义底部操作条的同学，需要用组件来进行封装，因此这里建议大家提前学习一下组件的封装。

自定义底部操作条

pages.json 文件中的 tabBar 不需要配置，操作条代码放在首页即可。
pages.json 文件中的 pages 数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。
示例中通过变量 PageCur 来切换不同 tabBar 页面，控制 tabBar 图标文字的样式切换，同时也控制需要显示对应 tabBar 的页面（组件引入）。

点此查看官方示例

vue

<template>
	<view>
        <!-- 这三个是对应的页面 -->
		<basics v-if="PageCur=='basics'"></basics>
		<components v-if="PageCur=='component'"></components>
		<plugin v-if="PageCur=='plugin'"></plugin>
        <!-- 底部操作条 -->
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="basics">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
			</view>
			<view class="action" @click="NavChange" data-cur="component">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
			</view>
			<view class="action" @click="NavChange" data-cur="plugin">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
		return {
				PageCur: 'basics'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

tab 操作条实现

操作条的父容器需求加上 class 类名 cu-bar 和 tabbar，同时可以加上 bg-white|... shadow|... 等样式来优化操作条。
固定底部：需要操作条固定在底部加上 class 类名 foot 即可。
每一个 tab 的元素需要加上 class 类名 action，该 tab 里面则放置对应的图标和文字。
展示不同的页面，以及 tab 需要用一个变量 PageCur 来进行控制。（官方示例 tab 图标是采用的图片，自定义也可以用图标）。
数字标签：对应的 tab 元素里可以加上数字标签 <view class="cu-tag badge">99+</view>，红色圆点：数字标签里没有内容。
中间的添加按钮：action 同级加上 class 类名 add-action，其里面的图标换成 button 即可。

演示代码（可直接复制使用）

vue

<template>
	<view>
        <!-- 这里是对应的页面 -->
		<homePage v-if="PageCur=='home'"></homePage>

        <!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
        <view class="cu-bar tabbar bg-white foot">
            <!-- 首页 -->
            <view class="action" :class="PageCur=='home'?'text-green':'text-gray'" 
                data-cur="home" @click="NavChange">
                <view class="cuIcon-homefill"></view> 首页
            </view>
            <!-- 分类 -->
            <view class="action" :class="PageCur=='similar'?'text-green':'text-gray'" 
                data-cur="similar" @click="NavChange">
                <view class="cuIcon-similar"></view> 分类
            </view>
            <!-- 中间发布按钮 -->
            <view class="action add-action" :class="PageCur=='sub'?'text-green':'text-gray'"         
                data-cur="sub" @click="NavChange">
                <button class="cu-btn cuIcon-add bg-green shadow"></button>
                发布
            </view>
            <!-- 购物车、右上角有数字角标 -->
            <view class="action" :class="PageCur=='cart'?'text-green':'text-gray'" 
                data-cur="cart" @click="NavChange">
                <view class="cuIcon-cart">
                    <!-- 数字角标 -->
                    <view class="cu-tag badge">99</view>
                </view>
                购物车
            </view>
            <!-- 我的、左上角红色圆点 -->
            <view class="action" :class="PageCur=='mine'?'text-green':'text-gray'" 
                data-cur="mine" @click="NavChange">
                <view class="cuIcon-my">
                    <!-- 红色圆点（数字角标） -->
                    <view class="cu-tag badge"></view>
                </view>
                我的
            </view>
        </view>

	</view>
</template>
 
<script>
	export default {
		data() {
		    return {
				PageCur: 'home'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

购物车底部操作条

操作条的父容器需求加上 class 类名 cu-bar 和 tabbar，还有一个 shop，同时可以加上 bg-white|... shadow|... 等样式来优化操作条。
固定底部：需要操作条固定在底部加上 class 类名 foot 即可。
每一个需要操作的元素需要加上 class 类名 action，该 action 元素里面则放置对应的图标和文字以及按钮。
数字标签：对应的 action 元素里可以加上数字标签 <view class="cu-tag badge">99+</view>，红色圆点：数字标签里没有内容。
立即订购：和 action 元素同级的 view 加上 class 类名 submit bg-red|...，该元素会默认占据剩余的宽度，从右侧预览图知道，可以是三个 action 元素加上一个 submit 元素，也可以是两个 action 元素加上两个 submit 元素。
立即订购的第二种样式：上面一种是默认撑宽的元素，第二种则是再该元素里放置一个自定义的按钮，实现为 action 同级元素加上 class 类名 btn-group，相当于把第五条 submit 换成 btn-group；然后 btn-group 里再放置自定义按钮。

演示代码（可直接复制使用）

vue

<!-- 右侧预览图，第一个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
    <button class="action" open-type="contact">
        <view class="cuIcon-service text-green">
            <view class="cu-tag badge"></view>
        </view>
        客服
    </button>
    <view class="action text-orange">
        <view class="cuIcon-favorfill"></view> 已收藏
    </view>
    <view class="action">
        <view class="cuIcon-cart">
            <view class="cu-tag badge">99</view>
        </view>
        购物车
    </view>
    <view class="bg-red submit">立即订购</view>
</view>

<!-- 右侧预览图，第二个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
    <button class="action" open-type="contact">
        <view class="cuIcon-service text-green">
            <view class="cu-tag badge"></view>
        </view>
        客服
    </button>
    <view class="action">
        <view class="cuIcon-cart">
            <view class="cu-tag badge">99</view>
        </view>
        购物车
    </view>
    <view class="bg-orange submit">加入购物车</view>
    <view class="bg-red submit">立即订购</view>
</view>

<!-- 右侧预览图，第三个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
    <button class="action" open-type="contact">
        <view class="cuIcon-service text-green">
            <view class="cu-tag badge"></view>
        </view>
        客服
    </button>
    <view class="action">
        <view class=" cuIcon-shop"></view> 店铺
    </view>
    <view class="action">
        <view class="cuIcon-cart">
            <view class="cu-tag badge">99</view>
        </view>
        购物车
    </view>
    <view class="btn-group">
        <button class="cu-btn bg-red round shadow-blur">立即订购</button>
    </view>
</view>

<!-- 右侧预览图，第四个购物车示例 -->
<view class="cu-bar bg-white tabbar border shop foot">
    <button class="action" open-type="contact">
        <view class="cuIcon-service text-green">
            <view class="cu-tag badge"></view>
        </view> 客服
    </button>
    <view class="action">
        <view class="cuIcon-cart">
            <view class="cu-tag badge">99</view>
        </view>
        购物车
    </view>
    <view class="btn-group">
        <button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
        <button class="cu-btn bg-red round shadow-blur">立即订购</button>
    </view>
</view>

自定义底部操作条 ​

tab 操作条实现 ​

购物车底部操作条 ​

自定义底部操作条

tab 操作条实现

购物车底部操作条