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

文章目录

  • [1. 自定义tabbar效果](#1. 自定义tabbar效果)
  • [2. pages新建tabbar页面](#2. pages新建tabbar页面)
  • [3. tabbar 页面结构](#3. tabbar 页面结构)
  • [4. tabbar 页面完整代码](#4. tabbar 页面完整代码)

1. 自定义tabbar效果

2. pages新建tabbar页面

  1. 首先在 pages.json 文件中,新建一个 tabbar 页面
js 复制代码
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/tabbar",
		"style": {
			"navigationBarTitleText": "tabbar页面",
			"navigationStyle": "custom"
		}
	},
	.....// 其他页面
],

3. tabbar 页面结构

  1. 此页面主要是写 tabbar的html样式和布局,引用主页面代码,通过 v-if 控制进行展示 indexsearchmaimnewsme 一级页面

4. tabbar 页面完整代码

  1. css 样式文件太多了就不贴出来了
html 复制代码
<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>
相关推荐
Json____9 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
zoahxmy092912 小时前
微信小程序 request 流式数据处理
微信小程序
人人题13 小时前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛15 小时前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_4404705015 小时前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云
web_Hsir17 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir17 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa18 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe18 小时前
微信小程序唤起app
微信小程序·小程序
不老刘20 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant