从0到1构建uniapp应用-创建标签页Tabs

最新推荐文章于 2024-06-03 13:38:13 发布

xrl2012

最新推荐文章于 2024-06-03 13:38:13 发布

阅读量894

点赞数 2

文章标签： uniapp 微信小程序 tabBar 标签栏

本文链接：https://blog.csdn.net/xrl2012/article/details/137336131

版权

本文详细介绍了如何使用uniapp框架创建微信小程序的底部标签页，包括创建me.vue页面、设置pages.json中的配置以及预制激活和默认的tabBar图标。

摘要由CSDN通过智能技术生成

背景

uniapp框架可以快速开发微信小程序，并且得到越来越多的使用。此系列我们将从0到1带大家一步步搭建uniapp开发脚手架。帮助大家快速上手微信小程序的开发。

需求说明

一般微信小程序的底部都有4个或5个标签页，给用户以导航的操作。此文将创建两个标签页面用来演示如何创建底部标签页面。

操作步骤

创建me.vue页面，用于展示我的信息。

首先在pages目录下创建me的目录，然后右键->新建页面

WX20240403-103350@2x.png
创建成功后会看到如下代码,默认生成的vue文件代码

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

并且在pages.json文件会生成配置页面数据。

{
    "path" : "pages/me/index",
    "style" : 
    {
            "navigationBarTitleText" : "我的",
            "enablePullDownRefresh" : false
    }
}

按照这个方式进行页面创建，效率是最高的。

配置Tabs标签

提前制作好图片icon,并且做两份，一份激活，一份默认。放在static的tab目录下，如下图

WX20240403-104130@2x.png

在pages.json页面，配置tabBar属性。

"tabBar": {
        "color": "#8a8a8a",
        "selectedColor": "#2c2c2c",
        "borderStyle": "black",
        "backgroundColor": "#f7f7f7",
        "list": [{
                        "pagePath": "pages/index/index",
                        "iconPath": "static/tab/index.png",
                        "selectedIconPath": "static/tab/index_current.png",
                        "text": "首页"
                },
                {
                        "pagePath": "pages/me/index",
                        "iconPath": "static/tab/me.png",
                        "selectedIconPath": "static/tab/me_current.png",
                        "text": "我的"
                }
        ]
},