代码如下
// index.vue
<view>
<home v-if="PageCur=='home'"></home>
<cars v-if="PageCur=='cars'"></cars>
<cart v-if="PageCur=='cart'"></cart>
<user v-if="PageCur=='user'"></user>
// colorui的tabbar
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="home">
<view class="cuIcon-homefill"></view>
<view :class="PageCur=='home'?'text-green':'text-gray'">首页</view>
</view>
<view class="action" @click="NavChange" data-cur="cars">
<view class="cuIcon-similar"></view>
<view :class="PageCur=='cars'?'text-green':'text-gray'">市场</view>
</view>
<view class="action text-gray add-action">
<button class="cu-btn cuIcon-add bg-green shadow"></button>
发布新车
</view>
<view class="action" @click="NavChange" data-cur="cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
<view :class="PageCur=='cart'?'text-green':'text-gray'">
购物车
</view>
</view>
<view class="action" @click="NavChange" data-cur="user">
<view class="cuIcon-my">
<view class="cu-tag badge"></view>
</view>
<view :class="PageCur=='user'?'text-green':'text-gray'">
我的
</view>
</view>
</view>
// cars.vue
<template>
<view>
<!-- <uni-nav-bar :status-bar="true" :fixed="true" left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar> -->
<scroll-view scroll-y class="page">
<view class="maxhei"></view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
export default {...}
</script>
<style>
.page {
height: 100vh;
}
.maxhei {
background-color: blue;
height: 1000px;
}
</style>
