uni-app开发：tabar组件与顶部导航栏（含右侧icon点击功能）【结合：`案例Demo截图`】

一、效果图 · 截图：

二、 `tabar`组件 + 顶部导航栏（含右侧icon点击功能）

组件的代码调用；
代码编写（在官方指定的pages.json文件内编写）；
默认与高亮状态的设置；
tabar的点击与切换

1. 文件`pages.json`代码如下：

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/tabar/index/index","style": {"navigationBarTitleText": "首页","selectedIconPath": "static/images/icon_index_HL.png","app-plus": {"bounce": "vertical","titleNView": {"buttons": [{"text": "\ue534","fontSrc": "/static/uni.ttf","fontSize": "22px","color": "#FFFFFF"}]}}}},{"path": "pages/tabar/mockExam/mockExam","style": {"navigationBarTitleText": "考试","selectedIconPath": "static/images/icon_mockexam_HL.png","app-plus": {"bounce": "vertical","titleNView": {"buttons": [{"text": "\ue534","fontSrc": "/static/uni.ttf","fontSize": "22px","color": "#FFFFFF"}]}}}},{"path": "pages/tabar/vip/vip","style": {"navigationBarTitleText": "VIP","selectedIconPath": "static/images/icon_vip_HL.png","app-plus": {"bounce": "vertical","titleNView": {"buttons": [{"text": "\ue534","fontSrc": "/static/uni.ttf","fontSize": "22px","color": "#FFFFFF"}]}}}},{"path": "pages/tabar/library/library","style": {"navigationBarTitleText": "题库","selectedIconPath": "static/images/icon_library_HL.png","app-plus": {"bounce": "vertical","titleNView": {"buttons": [{"text": "\ue534","fontSrc": "/static/uni.ttf","fontSize": "22px","color": "#FFFFFF"}]}}}},{"path": "pages/tabar/personal/personal","style": {"navigationBarTitleText": "我的","selectedIconPath": "static/images/icon_personal_HL.png","app-plus": {"bounce": "vertical","titleNView": {"buttons": [{"text": "\ue534","fontSrc": "/static/uni.ttf","fontSize": "22px","color": "#FFFFFF"}]}}}},{"path": "pages/about/about","style": {"navigationBarTitleText": "关于"}}],// 用于设置应用的状态栏、导航条、标题、窗口背景色等。"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "TKJCOM","navigationBarBackgroundColor": "#007AFF","backgroundColor": "#F8F8F8","backgroundColorTop": "#F4F5F6","backgroundColorBottom": "#F4F5F6"},"tabBar": {"color": "#7A7E83","selectedColor": "#007AFF","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tabar/index/index","iconPath": "static/images/icon_index.png","selectedIconPath": "static/images/icon_index_HL.png","text": "首页"}, {"pagePath": "pages/tabar/mockExam/mockExam","iconPath": "static/images/icon_mockexam.png","selectedIconPath": "static/images/icon_mockexam_HL.png","text": "考试"}, {"pagePath": "pages/tabar/vip/vip","iconPath": "static/images/icon_vip.png","selectedIconPath": "static/images/icon_vip_HL.png","text": "VIP"}, {"pagePath": "pages/tabar/library/library","iconPath": "static/images/icon_library.png","selectedIconPath": "static/images/icon_library_HL.png","text": "题库"}, {"pagePath": "pages/tabar/personal/personal","iconPath": "static/images/icon_personal.png","selectedIconPath": "static/images/icon_personal_HL.png","text": "我的"}]}  /* , "condition": { //模式配置，仅开发期间生效"current": 1, //当前激活的模式（list 的索引项）"list": [{"name": "首页", //模式名称"path": "pages/tabar/index/index", //启动页面，必选"query": "" //启动参数，在页面的onLoad函数里面得到。uid=100&t=1535987051}, {"name": "考试", //模式名称"path": "pages/tabar/mockExam/mockExam", //启动页面，必选"query": "" //启动参数，在页面的onLoad函数里面得到。}, {"name": "VIP", //模式名称"path": "pages/tabar/vip/vip", //启动页面，必选"query": "" //启动参数，在页面的onLoad函数里面得到。}, {"name": "题库", //模式名称"path": "pages/tabar/library/library", //启动页面，必选"query": "" //启动参数，在页面的onLoad函数里面得到。}, {"name": "我的", //模式名称"path": "pages/tabar/personal/personal", //启动页面，必选"query": "" //启动参数，在页面的onLoad函数里面得到。}]}*/
}

2. 文件`tabar/index/index.vue` 代码示下：

<script>export default {data() {return {title: 'Hello'}},onLoad() {},        // 顶部导航栏 · 点击跳转到about页面onNavigationBarButtonTap(e) {uni.navigateTo({url: '/pages/about/about'});},methods: {}}
</script>

三、总结：

想实现tabar组件的显示和点击跳转等功能，需要遵循pages.json内添加代码，注意规范
所有可跳转的页面均必须在pages.json的代码"pages": [ ]参数内全部得到定义："pages": [ 全部内部定义]
如果没有定义就进行调用代码跳转（·会报错·如下图所示·）
哪个页面想跳转到about页就在哪个页面写上方法 uni.navigateTo 进行调用（代码见上文）。

以上就是关于“ uni-app开发：tabar组件与顶部导航栏（功能开发篇） ” 的全部内容。

uni-app开发：tabar组件与顶部导航栏（功能开发篇）相关推荐

uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
android studio 顶部导航栏_5分钟学交互：手机交互组件归纳导航篇
个人公众号:鱼大大设计铺,ID:ydsjp2018 转载请私信作者,并注明来源公众号:沐风与体验设计交互设计其实就是根据产品目标和用户目标,选择最合适的导航结构.页面结构.交互控件以及动效.这个任务 ...
Android开发笔记（二十）顶部导航栏ActionBar
标题栏ActionBar ActionBar是在Android3.0之后引入的,所以Android2.x之前的版本不能直接使用ActionBar.现在ActionBar广泛用做APP的顶部导航栏,它在 ...
android开发(49) android 使用 CollapsingToolbarLayout ，可折叠的顶部导航栏
概述在很app上都见过可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
Android 资讯类App项目实战第一章滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章第二章 retrofit获取 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
仿抖音短视频APP源码，顶部导航栏切换详解
仿抖音短视频APP源码,顶部导航栏切换详解的相关代码 class DaoHangNan extends StatefulWidget //继承StatefulWidget{TabController ...

uni-app开发：tabar组件与顶部导航栏（功能开发篇）

uni-app开发：tabar组件与顶部导航栏（含右侧icon点击功能）【结合：`案例Demo截图`】

一、效果图 · 截图：

二、 `tabar`组件 + 顶部导航栏（含右侧icon点击功能）

1. 文件`pages.json`代码如下：

2. 文件`tabar/index/index.vue` 代码示下：

三、总结：

uni-app开发：tabar组件与顶部导航栏（功能开发篇）相关推荐

最新文章

热门文章

uni-app开发：tabar组件与顶部导航栏（功能开发篇）

uni-app开发：tabar组件与顶部导航栏（含右侧icon点击功能）【结合：案例Demo截图】

一、效果图 · 截图：

二、 tabar组件 + 顶部导航栏（含右侧icon点击功能）

1. 文件pages.json代码如下：

2. 文件tabar/index/index.vue 代码示下：

三、总结：

uni-app开发：tabar组件与顶部导航栏（功能开发篇）相关推荐

最新文章

热门文章

uni-app开发：tabar组件与顶部导航栏（含右侧icon点击功能）【结合：`案例Demo截图`】

二、 `tabar`组件 + 顶部导航栏（含右侧icon点击功能）

1. 文件`pages.json`代码如下：

2. 文件`tabar/index/index.vue` 代码示下：