使用uni-app实现底部tabber以及切换

无聊中，了解到了一个小的问题，接下来就说说，使用uni-app实现一个tabber的实现。

第一 - 了解uni-app

如果对uni-app不了解的，可以看我之前的博客：简单入门（可能有点不全，希望多多包含，毕竟是刚接触uni-app的。）

第二 - 新建项目

在这里有两种方式：本人建议看官网
1、可以选择官网：官网
2、我的博客：简单入门

第三 - 简单的底部tabber

简单的demo：

代码实现：

uni-app 简单来说就是vue+小程序的综合（我认为的）

pages.json

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/square/square","style": {"navigationBarTitleText": "广场"}}, {"path": "pages/my/my","style": {"navigationBarTitleText": "我的"}}],"globalStyle": { //用于设置应用的状态栏、导航条、标题、窗口背景色等。"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": { //设置底部的tabBar   中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。"color": "#838A9D","selectedColor": "#1182FB","backgroundColor": "#FAFAFA","position": "bottom","borderStyle": "white","fontSize": "12px","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/tabberImg/首页2@2x.png","selectedIconPath": "static/tabberImg/首页1@2x.png"},{"pagePath": "pages/square/square","text": "广场","iconPath":"static/tabberImg/任务1@2x.png","selectedIconPath": "static/tabberImg/任务2@2x.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tabberImg/我的1@2x.png","selectedIconPath": "static/tabberImg/我的2@2x.png"}]}
}

tabBar 主要就是对pages.json的一个设置，上面的可能不全，具体还要以官网为准

使用uni-app实现底部tabber以及切换相关推荐

Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
Android底部导航栏切换页面填坑
** Android底部导航栏切换页面填坑 ** 这个效果的实现关键点就是给选项赋予两种状态,focused和normal,在主程序中用监听判断是否被选中,就给被选中的选项设focused为true, ...
Android中的底部导航栏切换TabContainerView
前言:在GitHub上看到一个框架,实现底部导航栏切换,感觉不错,就在这里总结一下. 参考:https://www.jianshu.com/p/9aaff43bbf9f https://github. ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下: http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

使用uni-app实现底部tabber以及切换

第一 - 了解uni-app

第二 - 新建项目

第三 - 简单的底部tabber

使用uni-app实现底部tabber以及切换相关推荐

最新文章

热门文章