底部操作条
温馨提示
我们可以使用 Bar 操作条自定义项目底部的 tabBar，就拿官方示例代码来举例。
想要使用自定义底部操作条的同学，需要用组件来进行封装，因此这里建议大家提前学习一下组件的封装。
# 自定义底部操作条
pages.json文件中的tabBar不需要配置，操作条代码放在首页即可。pages.json文件中的pages数组中第一项表示应用首页，如果项目有引导页，则根据项目的逻辑来做调整。示例中通过变量
PageCur来切换不同tabBar页面，控制tabBar图标文字的样式切换，同时也控制需要显示对应tabBar的页面（组件引入）。
点此查看官方示例
<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即可。
演示代码（可直接复制使用）
<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里再放置自定义按钮。
演示代码（可直接复制使用）
<!-- 右侧预览图，第一个购物车示例 -->
<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>