背景
uniapp框架可以快速开发微信小程序，并且得到越来越多的使用。 此系列我们将从0到1带大家一步步搭建uniapp开发脚手架。 帮助大家快速上手微信小程序的开发。
需求说明
一般微信小程序的底部都有4个或5个标签页，给用户以导航的操作。 此文将创建两个标签页面用来演示如何创建底部标签页面。
操作步骤
创建me.vue页面，用于展示我的信息。
首先在pages目录下创建me的目录，然后右键->新建页面
创建成功后会看到如下代码,默认生成的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目录下，如下图
-
在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": "我的"
}
]
}, -
至此整个标签栏就可以完成了
- 线上体验地址
