微信小程序|小程序自定义底部导航栏
文章目录
- 一、文章前言
- 二、使用默认的tabBar
- 三、使用自定义tarBar
- 四、实现代码
一、文章前言
小程序底部导航栏是很常见的一个功能,如果你的小程序是一个多tab的应用,那么我们就可以通过配置tabBar来实现切换tab时显示对应的页面。
二、使用默认的tabBar
2.1:创建一个小程序,打开app.json文件,找到里面的tabBar节点。
2.2:根据不同的属性值进行对应的配置,即可指定不同tab栏的表现。其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象。
一些注意事项:
1、list属性里面的pagePath必须是已经创建好的页面,而不是一个不存在的页面。
2、iconPath和selectedIconPath属性对应的是tabBar选中前以及选中后的图片显示,图片需存放在小程序文件夹。
3、需要下载对应图标的可以去阿里巴巴矢量图标库。
属性 | 类型 | 必填 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | ||
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色,仅支持十六进制颜色 | ||
backgroundColor | HexColor | 是 | tab 的背景色,仅支持十六进制颜色 | ||
borderStyle | string | 否 | black | tabbar 上边框的颜色, 仅支持 black / white | |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab | ||
position | string | 否 | bottom | tabBar 的位置,仅支持 bottom / top | |
custom | boolean | 否 | false | 自定义 tabBar | 2.5.0 |
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | string | 是 | 页面路径,必须在 pages 中先定义 |
text | string | 是 | tab 上按钮文字 |
iconPath | string | 否 | 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。 |
selectedIconPath | string | 否 | 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。 |
2.3、简单操作下来就能得到一个美观实用的tabBar导航栏啦
三、使用自定义tarBar
3.1:自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。官方默认的tabbar限制了栏目的数量,展示样式也比较传统,对于爱挑战的开发者们来说,自定义tabBar无疑是更好的选择。
3.2:使用流程
(1)配置信息
- 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
- 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
{"tabBar": {"custom": true,"color": "#000000","selectedColor": "#000000","backgroundColor": "#000000","list": [{"pagePath": "page/component/index","text": "组件"}, {"pagePath": "page/API/index","text": "接口"}]},"usingComponents": {}
}
(2)添加 tabBar 代码文件,在代码根目录下添加入口文件
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
(3)编写 tabBar 代码,用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。
四、实现代码
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"><block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}"><navigator wx:if="{{item.isSpecial == true}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate"><view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view><image class='special-text-wrapper'></image><text>{{item.text}}</text></navigator><navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab"><image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image><text>{{item.text}}</text></navigator></block>
</view>
// tabBarComponent/tabBar.js
const app = getApp();
Component({/*** 组件的属性列表*/properties: {tabbar: {type: Object,value: {"backgroundColor": "#ffffff","color": "#979795","selectedColor": "#1c1c1b","list": [{"pagePath": "/pages/index/index","iconPath": "icon/icon_home.png","selectedIconPath": "icon/icon_home_HL.png","text": "首页"},{"pagePath": "/pages/classify/classify","iconPath": "icon/icon_home.png","selectedIconPath": "icon/icon_home_HL.png","text": "分类"},{"pagePath": "/pages/middle/middle","iconPath": "icon/icon_release.png","isSpecial": true,"text": "发布"},{"pagePath": "/pages/car/car","iconPath": "icon/icon_mine.png","selectedIconPath": "icon/icon_mine_HL.png","text": "购物车"},{"pagePath": "/pages/mine/mine","iconPath": "icon/icon_mine.png","selectedIconPath": "icon/icon_mine_HL.png","text": "我的"}]}}},/*** 组件的初始数据*/data: {isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false},/*** 组件的方法列表*/methods: {}
})
.tabbar_box{display: flex;flex-direction: row;justify-content: space-around;position: fixed;bottom: 0;left: 0;z-index: 999;width: 100%;height: 98rpx;box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.tabbar_box.iphoneX-height{padding-bottom: 66rpx;
}
.middle-wrapper{position: absolute;right: 310rpx;bottom: 0;background-color: #fff;width: 120rpx;height: 120rpx;border-radius: 50%;border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{bottom: 66rpx;
}
.tabbar_nav{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 20rpx;height: 100%;position: relative;
}
.tabbar_icon{width: 56rpx;height: 56rpx;
}
.special-wrapper{position: absolute;top: -36rpx;width: 96rpx;height: 96rpx;border-radius: 50%;border-top: 2rpx solid #f2f2f3;background-color: #fff;text-align: center;box-sizing: border-box;padding: 6rpx;
}
.special-wrapper .tabbar_icon{width: 84rpx;height: 84rpx;
}
.special-text-wrapper{width: 56rpx;height: 56rpx;
}
微信小程序|小程序自定义底部导航栏相关推荐
- 微信小程序使用weui自定义底部导航栏,切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...
- uniapp 底部菜单_uni-app 自定义底部导航栏的实现
这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写 ...
- 微信小程序自定义底部导航栏遮挡页面内容(已解决)
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
- 微信小程序开发笔记二—底部导航栏tabar
文章目录 一.实现效果 二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件 三.注意事项 一.实现效果 首先展示一下实现效果 底部导航栏有三个按键 ...
- Android 自定义底部导航栏消息显示
转载请标明出处: http://blog.csdn.net/tyzlmjj/article/details/47186249 本文出自:[M家杰的博客] 概述 底部导航栏的做法多种多样,这次主要用到了 ...
- 自定义底部导航栏图标
底部导航栏我门一般的实现方式就是 RadioGroup 和RadioButton这种组合.但是这样会有很多弊端.比如有个消息提示.比如要随时改变图标 /*** Created by sdx on 20 ...
- android底部导航栏网络请求有冲突,Android 自定义底部导航栏 CustomizeTabLayout(支持访问网络图片、本地图片)...
先看效果 网络图片(使用第三方库Glide加载图片) GIF1.gif 本地图片 GIF2.gif 使用方法 xml(布局可关联鸿洋大神的AutoLinearLayout可完美适配) activity ...
- html底部导航栏图标切换,【微信小程序】自定义底部导航栏,切换不同页面显示不同tabbar...
https://blog.csdn.net/small_lack/article/details/80959278 在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在 ...
- html导航栏代码跳转,微信小程序自定义底部导航栏tabBar(含跳转页面wx.navigateTo)...
一.app.json配置 这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
- 你会微信小程序自定义底部导航栏吗?
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
最新文章
- 用数据说话——IOPS:RAID1+0 RAID5
- python反序数函数_python range()函数取反序遍历sequence的方法
- 【BOOM】一款有趣的Javascript动画效果
- css div 边缘渐变,围绕div的CSS3渐变边框
- C | 构成和编码规范
- C++应用过程中使用知识点
- txt记录位置 c++,python显示位置
- oracle DB死锁
- 从零开始山寨Caffe·叁:全局线程管理器
- 掘金翻译计划 GitHub Star 破3千--终于等到你
- 解决Element的 InfiniteScroll 无限滚动组件报错
- PowerBuilder2017
- 洛谷试炼场 动态规划TG.lv(2)
- c++游戏编程三国杀
- border-radius和border-image
- 总账库存科目明细追溯
- bs4提取p标签内的值href
- SCI论文写作常用句子、句式、词汇(总结)100
- OpenWrite(博客群发平台)到底好不好用,有什么缺点?
- c语言工资管理程序用文档,c语言人事工资管理系统源程序