当前位置：首页 > news >正文

uni-app 微信小程序之自定义中间圆形tabbar

news 2025/8/24 6:43:19

文章目录

1. 自定义tabbar效果
2. pages新建tabbar页面
3. tabbar 页面结构
4. tabbar 页面完整代码

1. 自定义tabbar效果

请添加图片描述

2. pages新建tabbar页面

首先在 pages.json 文件中，新建一个 tabbar 页面

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/tabbar","style": {"navigationBarTitleText": "tabbar页面","navigationStyle": "custom"}},.....// 其他页面
],

3. tabbar 页面结构

此页面主要是写 tabbar的html样式和布局，引用主页面代码，通过 v-if 控制进行展示 index，search，maim，news，me 一级页面

在这里插入图片描述

4. tabbar 页面完整代码

css 样式文件太多了就不贴出来了

<template><view><index  v-if="PageCur=='index'"></index><search v-if="PageCur=='search'"></search><news v-if="PageCur=='news'"></news><me v-if="PageCur=='me'"></me><view class="box"><view class="cu-bar tabbar bg-white shadow foot"><view class="action" @click="NavChange" data-cur="index"><view class='cuIcon-cu-image'><image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image><image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image></view><view :class="PageCur=='index'?'color_main':'text-gray'">首页</view></view><view class="action" @click="NavChange" data-cur="search"><view class='cuIcon-cu-image'><view class="cu-tag badge"></view><image v-if="PageCur=='search'" src="../../static/tabBar/shop_cur.png"></image><image v-if="PageCur != 'search'" src="../../static/tabBar/shop.png"></image></view><view :class="PageCur=='search'?'color_main':'text-gray'">会员专区</view></view>
<view @click="NavChange" class="action text-gray add-action" data-cur="main"><image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image><view :class="PageCur=='main'?'color_main':'text-gray'">组件模板</view></view><view class="action" @click="NavChange" data-cur="news"><view class='cuIcon-cu-image'><view class="cu-tag badge">{{message}}</view><image v-if="PageCur=='news'" src="../../static/tabBar/order_cur.png"></image><image v-if="PageCur != 'news'" src="../../static/tabBar/order.png"></image></view><view :class="PageCur=='news'?'color_main':'text-gray'">文章资讯</view></view><view class="action" @click="NavChange" data-cur="me"><view class='cuIcon-cu-image'><image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image><image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image></view><view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view></view></view></view></view>
</template><script>import index from "./index.vue";	//首页import search from "./search.vue";	//会员专区import main from "./main.vue";	//组件模板import news from "./news.vue";	//文章咨询import me from "./me.vue";	//个人中心export default {components: {index,search,main,news,me},data() {return {PageCur: 'index',message: '99+',duration:1};},methods: {NavChange: function(e) {this.PageCur = e.currentTarget.dataset.cur;},}}
</script><style lang="scss">// 省略
</style>