网站系统设计方案,个人建网站首选什么域名好,dns修改国外网站,网站建设方案2018文章目录 #x1f4cb;前言⏬关于专栏 #x1f3af;关于小程序 tabbar 的一些知识#x1f3af;创建一个基本的 tabBar#x1f4dd;最后 #x1f4cb;前言
这篇文章的内容主题是关于小程序的 tabBar 底部导航栏的入门使用和实战技巧。通过上一篇文章的基础#xff0c;我们… 文章目录 前言⏬关于专栏 关于小程序 tabbar 的一些知识创建一个基本的 tabBar最后 前言
这篇文章的内容主题是关于小程序的 tabBar 底部导航栏的入门使用和实战技巧。通过上一篇文章的基础我们继续对 uni-app 进行更深一步的了解和学习以上一篇文章创建的项目为例子我们在这个项目的基础上进行改动和学习小程序的 tabBar 内容。
⏬关于专栏
本篇文章是我的 uni-app 专栏的第二篇文章这个专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给大家分享关于 uni-app 开发的技巧以及快速入门的诀窍等等。
专栏主页uni-app_黛琳ghz的博客-CSDN博客 关于小程序 tabbar 的一些知识
tabBar 是微信小程序中的一种常见导航方式通常位于页面的底部用于切换不同的页面或功能模块。
tabBar标签栏通常由若干个 tabBarItem标签项组成每个 tabBarItem 表示一个导航选项。用户点击不同的 tabBarItem小程序会切换到对应的页面或功能。每个 tabBarItem 通常包含一个图标和一个文字标签如下图所示。 在开发小程序时可以通过以下步骤来使用 tabBar
1️⃣在 app.json 文件中配置 tabBar 字段指定 tabBar 的整体样式和行为以及各个 tabBarItem 的相关信息。
tabBar: {color: #999999,selectedColor: #007AFF,backgroundColor: #ffffff,borderStyle: white,list: [{pagePath: pages/index/index,iconPath: assets/tabbar/home.png,selectedIconPath: assets/tabbar/home_selected.png,text: 首页},{pagePath: pages/category/category,iconPath: assets/tabbar/category.png,selectedIconPath: assets/tabbar/category_selected.png,text: 分类},// 其他 TabBarItem]
}2️⃣在各个页面的 json 配置文件中设置 navigationBarTitleText 字段以显示每个页面的标题。
3️⃣创建对应的页面文件并在页面文件中编写对应的逻辑和界面。每个页面可以通过 wx.navigateTo、wx.redirectTo、wx.switchTab 等函数进行跳转同理等同于 uni-app 的 uni.navigateTo。
4️⃣将 tabBar 的图标和文字资源放置到对应的路径下并在配置文件中引用。 创建一个基本的 tabBar
通过上面的介绍我们可以大致了解什么是 tabBar 以及如何在 uni-app 项目中创建接下来我们通过实际操作来加深印象以及学习一些实战技巧首先我们从创建一个基本的 tabBar 开始着手。
首先打开上一篇文章创建的项目然后在该项目的基础上创建一个包含四个选项的导航栏用到的导航栏图标如下。 打开项目后找到文件目录中的 pages.json 这个页面配置文件首先我们把默认的 index 页面注释掉然后创建四个新的页面如下图。 {path: pages/home/home,style: {navigationBarTitleText: 主页}},{path: pages/activity/activity,style: {navigationBarTitleText: 活动}},{path: pages/note/note,style: {navigationBarTitleText: 记事本}},{path: pages/my/my,style: {navigationBarTitleText: 我的}}与此同时也要在 pages 文件夹下创建好对应页面。 然后在 pages.json 中新建一个 tabbar 对象然后配置好导航栏的颜色和字体颜色以及字体别选中的颜色然后创建一个 list 数组来放置导航栏每个导航栏需要配置最基本的路径为了更加完善可以设置图标、被选中的图标以及导航栏的文字比如说主页、我的等等。 这种写法是默认的样式以及布局是小程序内置的如果对导航栏有其他样式和布局需求的可以自己定义。接下来我们来看看效果如下图。 这样一个简单的导航栏就制作完成了除此之外还可以设置不同数量的导航栏选项其中五个的、三个的可以进行特殊的设计比如说中间的那个按钮设置为凸起的然后图标大于其他的选项以此形成强烈的视觉效果一般中间的这个按钮会是常用的比如说扫码扫单号、添加、上传等等功能。我们可以参考这种设计如下图。 最后
到此就是本篇文章的全部内容了通过这篇文章我们可以快速了解学习 tabBar 底部导航栏的使用和设计。这篇文章是博主 uni-app 专栏的第二篇文章后续会不断的更新更多关于 uni-app 的干货、实战经验、学习经验期待你的关注和留言。
