标签：uniapp false 程序实现 app pagePath tabbar uni pages

先看下效果

实现步骤

1.先引入uview ui，不会的可以看下我另外一篇文章，写的很详细
uniapp 中uview-ui的使用教程
https://blog.csdn.net/hu104160112/article/details/120076812?spm=1001.2014.3001.5501

2.创建tabbar 组件及页面

3.pages.json文件中配置

{	
	"easycom": {
		"autoscan": true,
		"custom": {
			"^uni-(.*)": "@/components/uni-$1/uni-$1.vue",
			"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
		{
			"path": "pages/tabbar/tabbar1",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar2",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar3",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar4",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/tabbar/tabbar5",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
	    "list": [{
	        "pagePath": "pages/tabbar/tabbar1"	        
	    }, {
	        "pagePath": "pages/tabbar/tabbar2"	        
	    },{
	        "pagePath": "pages/tabbar/tabbar3"	        
	    },{
	        "pagePath": "pages/tabbar/tabbar4"
	    },{
	        "pagePath": "pages/tabbar/tabbar5"
	    }]
	}
}

4.tabbar组件

<template>
	<view>
		<view class="u-page">
			<!-- 所有内容的容器 -->
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true" active-color='#5098FF'></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: true,
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar1',
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar2',
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar3',
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar4',
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/tabbar5',
					}
				],
				current: 0
			}
		},
	}
</script>

5.tabbar1，2，3，4，5等页面

<template>
	<view>
		<view class="">tabbar1</view>
		<tabbar></tabbar>
	</view>
	
</template>

<script>
	import {tabbar} from "../../components/tabbar.vue"
	export default{
		components:{
			tabbar
		},
		data(){
			return {}
		},
	}
</script>

<style>
</style>

这样就可以了

下面是 tabbar组件里list的属性配置，也就是每个tabbar的配置

// 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
// 或者png图标的【绝对路径】，建议尺寸为80px * 80px
// 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
// 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
list = [
	{
		iconPath: "home", //未激活（未选中）的图标
		selectedIconPath: "home-fill", // 激活(选中)的图标
		text: '首页', // tabbar显示的提示文字
		count: 2, // 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
		isDot: true, // 如果配置此值为true，那么角标将会以红点的形式显示
		customIcon: false, // 如果使用自定义扩展的图标库字体，需配置此值为true
		midButton: false, // 如果是凸起按钮项，需配置此值为true
		pagePath: '', // 点击某一个tabbar时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径，需要以"/"开头
	}
]

标签：uniapp,false,程序实现,app,pagePath,tabbar,uni,pages
来源： https://blog.csdn.net/hu104160112/article/details/120174512

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。