小程序底部导航栏

在app.json文件中添加如下代码:

"tabBar": {
"color": "black",
"backgroundColor":"#fff",
"selectedColor": "#11cd6e",
"borderStyle":"white",
"list": [{
"selectedIconPath": "image/home_HL.png",
"iconPath": "image/home.png",
"pagePath": "pages/index/index",
"text": "首页"
}, {
"selectedIconPath": "image/1168874.png",
"iconPath": "image/dingdan.png",
"pagePath": "pages/logs/logs",
"text": "订单"
}, {
"selectedIconPath": "image/508421.png",
"iconPath": "image/508417.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}]
}

//selectedIconPath:选中时的图片样式

iconPath没选中时的图片

pagePath:跳转的页面链接

backgroundColor:选中时字的颜色

时间: 2024-10-12 21:45:48

小程序底部导航栏的相关文章

小程序底部导航栏设置

tabBar与window.pages并列,pagePath点击进入的页面路径,selectedIconPath点击选中状态 "tabBar": { "color": "#353535", "selectedColor": "#3cc51f", "borderStyle": "white", "backgroundColor": "#ff

微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键、首页键,动态设置标题,响应式组件

微信小程序自定义导航栏 navigation bar 返回键 首页 github: https://github.com/chen-yt/wx_custom_navigation_bar https://github.com/Superman2113/wx_custom_navigation_bar 代码 navbar组件 navbar.wxml <view class="navbar" style="{{'height: ' + navigationBarHeight

微信小程序 自定义导航栏(1)

看着原博文https://www.cnblogs.com/sese/p/9761713.html简单的练习. 1.在app.json中     window配置navigationStyle 2.计算相关值 1. 整个导航栏的高度: 2. 胶囊按钮与顶部的距离: 3. 胶囊按钮与右侧的距离. 小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息 App.js 代码如下: 通过这些信息

小程序自定义导航栏

将app.json里的navigationStyle设置为navigationStyle:custom.可以在.wxss里通过margin和padding来自定义导航栏. 例如在.wxml里写 <view class="nav">我是汽车维修技师</view> 在.wxss里设置样式 .nav{height:90rpx;line-height: 90rpx;margin-top:60rpx;padding-left:20rpx;font-size:28rpx;f

FragmentTabHost+FrameLayout实现底部导航栏

app经常用到底部导航栏,早前使用过RadioGroup+FrameLayout实现或者RadioGroup+ViewPager实现,现在基本使用FragmentTabHost+FrameLayout来实现,因为使用起来简单易用.下面写一个小例子简要地总结一下这个组合. 首先,看一下例子的最终运行效果图 -> 这5个图标的效果其实都是一样的,只要做出来一个,以此类推就可以写出其他几个 第一步, FragmentTabHost+FrameLayout布局,先看一下代码: <?xml versio

Android实习札记(5)---Fragment之底部导航栏的实现

Android实习札记(5)---Fragment之底部导航栏的实现 --转载请注明出处:coder-pig 在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就来学习Fragment应用的简单例子吧! 就是使用Fragment来实现简单的底部导航栏,先贴下效果图: 看上去很简单,实现起来也是很简单的哈!那么接着下来就看下实现的流程图吧: 实现流程图: 看完流程图是不是有大概的思路了,那么接着就开始代码的编写吧: 代码实现: ①先写布局,布局的话很简单,一个FrameLayou

移动端底部导航栏固定——兼容IOS

问题:移动端前端底部导航栏设计 兼容安卓下的各种浏览器和IOS自带的Safari,但是不兼容苹果下的 钉钉. 具体代码格式: <body> <!-- 头部导航栏 --> <div class="header">内容</div> <!-- 内容 --> <div class="content">内容</div> <!-- 底部导航栏 --> <div class=&q

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

Android应用底部导航栏(选项卡)实例

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: [1]  res/layout目录下的 maintabs.xml 源码: <?xml version="1.0