导航栏（9）
[self.navigationController visibleViewController]小程序-导航栏 - 简书
小程序-导航栏
大多数的软件都会有一个甚至多个导航栏（选项卡或者Tab），开发一个完整的微信小程序，那导航栏也是必不可少的。如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面，通过设置position来使其位于顶部或者底部，可选值 bottom、top。
1.当设置 position 为 top 时，将不会显示 icon
2.tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
项目主界面的tabBar是在app.json中进行设置的，和pages和window并列显示：
"tabBar": {
"borderStyle": "black",
//tabbar上边框的颜色， 仅支持 black/white
"position": "bottom",
//可选值 bottom、top
"backgroundColor": "#FFFFFF",
//tab 的背景色
"color": "gray",
//tab 上的文字默认颜色
"selectedColor": "#DF5054",
//tab 上的文字选中时的颜色
"pagePath": "pages/home/home",
//页面路径，必须在 pages 中先定义
"text": "首页",
//tab 上按钮文字
"iconPath": "/res/icon/home_unselected.png",
//图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
"selectedIconPath": "/res/icon/home_selected.png"
//选中时的图片路径，不支持网络图片
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "/res/icon/kind_unselected.png",
"selectedIconPath": "/res/icon/kind_selected.png"
"pagePath": "pages/trolley/trolley",
"text": "购物车",
"iconPath": "/res/icon/cart_unselected.png",
"selectedIconPath": "/res/icon/cart_selected.png"
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/res/icon/mine_unselected.png",
"selectedIconPath": "/res/icon/mine_selected.png"
显示效果如下：
底部tabBar.png
其实tabBar在项目中的使用最多就是在底部，效果不够炫酷，放在顶部不大能够吸引用户的眼球和满足用户的体验，因此，顶部导航栏自定义的居多，下面就说一下自定义的流程和实现方式。先从简单的做起，仿底部导航栏并稍作修改其样式，实现顶部导航栏。
index.wxml：
&view class='tablist'&
&view wx:for="{{tabList}}" class='item {{current==index?"select":""}}' data-pos='{{index}}' bindtap='tabItemClick'&
&text&{{item}}&/text&
&view class='content'&&text&{{tabList[current]}}&/text&&/view&
index.wxss：
flex-direction:
height: 100%;
.tablist {
background: #f5f5f5;
height: 80
.tablist .item {
justify-content:
align-items:
font-size: 11
color: #353535;
.tablist .item.select {
color: #e64340;
.tablist .item.select::after {
content: "";
bottom: 0;
background: #e64340;
height: 100%;
justify-content:
align-items:
index.js：
tabList: ['首页', '活动', '我的'],
current: 0,//当前选中的Tab项
onLoad: function () {
* Tab的点击切换事件
tabItemClick: function (e) {
this.setData({
current: e.currentTarget.dataset.pos
实现效果没什么难度，唯一比较吸引我的是伪类（::after），以前做Android没有接触过这个东西，感觉这个东西好拽，不仅仅是下边的选中横线，还可以用它来实现上尖角三角形和下尖角三角形，以及尖角箭头等效果，省去切图的琐事，不用在叨扰美工来切图了。贴个有助于理解的网址吧，不懂得可自行百度理解。
看一下效果：
顶部导航栏1.png
至此，一个简单的顶部导航栏算是实现了，其细节可以更加美化，不做赘述。现在这个导航栏只是可以点击顶部的Tab来切换，若是可以划动底部内容部分联动上部切换选中，这样使用起来是不是更舒服呢，像拼多多的小程序即实现了这样的效果。
其实实现思路也简单，底部放上一个swpier，让其充满剩余的区域不就可以滑动了嘛！
index.wxml：
&!-- &view class='content'&&text&{{item}}&/text&&/view& --&
&swiper class='out' current='{{current}}' indicator-dots="{{false}}" autoplay="{{false}}" bindchange="contentChange"&
&swiper-item wx:for="{{tabList}}"&
&view class='content'&
&text&{{item}}&/text&
&/swiper-item&
index.wxss：
width: 100%;
index.js：
* 内容区域swiper的切换事件
contentChange: function (e) {
this.setData({
current: e.detail.current
自定义的导航栏和swiper同时使用一个current，这就将两个组件关联起来，一个变，另一个也会跟着改变。
顶部导航栏2.png
现在底部也可以划动了，初步效果实现，但是还差点feel，顶部是写死的三个，那我按照微信的来说写2-5个也是没问题的，那要是再多点，六七个或者更多呢，那都挤在里面想想都丑死。继续干！
那就需要把顶部导航栏外面的view换成scroll-view，可滚动视图。
orderList.wxml：
顶部TabList
&scroll-view class="scroll-view_H" scroll-x scroll-with-animation="true" scroll-left="{{scrollTop}}" scroll-into-view="tab-{{id}}"&
&view class='out'&
&view class='table-out'&
&block wx:for="{{tabList}}"&
&text class='table-name {{current==index?"active":""}}' data-pos='{{index}}' catchtap='tableSelected' id='tab-{{index}}'&{{item.tableName}}&/text&
&/scroll-view&
&swiper class='swiper' bindchange='bindChange' current='{{current}}' indicator-dots='{{false}}' autoplay='{{false}}'&
&block wx:for="{{orderList}}" wx:for-item='orders'&
&swiper-item class='swiper-item'&
&scroll-view class='scroll-view_V' scroll-y bindscrolltolower='pulluprefresh'&
&block wx:for='{{orders.detail}}' wx:for-item='items'&
&view class='order_item' catchtap='orderDetail' data-pos='{{index}}'&
&!-- 订单item内容略
&/scroll-view&
&/swiper-item&
orderList.wxss：
顶部TabList
.scroll-view_H {
background: #
height: 80
padding: 0
z-index: 50;
border-bottom: 1rpx solid #
height: 100%;
flex-direction:
box-sizing: border-
background: #
.table-out {
width: 100%;
height: 100%;
white-space:
padding: 0
.table-name {
width: 140
padding: 20rpx 20rpx 14rpx 20
color: #353535;
font-size: 11
box-sizing: border-
.table-name.active {
padding: 20rpx 20rpx 14rpx 20
color: #e64340;
font-size: 11
box-sizing: border-
.table-name.active::after {
content: '';
background: #e64340;
.table-line {
background-color: #e64340;
box-sizing: border-
orderList.js：
* Table选择事件
tableSelected: function (e) {
let pos = e.currentTarget.dataset.
let list = this.data.orderL
let scrollTop = this.data.scrollT
this.setData({
current: pos,
if (pos == 5) {
this.setData({
scrollTop: 150,
} else if (pos &= 4) {
this.setData({
scrollTop: 0,
* 底部滑动事件
bindChange: function (e) {
let pos = e.detail.
let list = this.data.orderL
this.setData({
current: e.detail.current
if (pos == 5) {
this.setData({
scrollTop: 150,
} else if (pos == 4) {
this.setData({
scrollTop: 0,
效果如下：
顶部导航栏3-1.png
顶部导航栏3-2.png
这样，一个完整的导航栏就实现了，让我感觉唯一美中不足的地方是，划动过程中导航栏底部的红线没有移动的动画，下一波可以搞一下动画效果的实现。
It never rains but it pours.
发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注
09:45字数 61697阅读 3316评论 2喜欢 85 用到的组件 1、通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FM...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用到的组件1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SDWebImage多个缩略图缓存组件 UICKeyChainStore存放用户账号密码组件 Reachability监测网络状态 DateTools友好...
用到的组件1、通过CocoaPods安装项目名称项目信息AFNetworking网络请求组件FMDB本地数据库组件SDWebImage多个缩略图缓存组件UICKeyChainStore存放用户账号密码组件Reachability监测网络状态DateTools友好化时间MBP...
看天空上的云朵 连空 圈线 不知道下一个停脚点 连一向肆意的风 都不曾出现 那样 至少 还可以选择风中凌乱 在静谧出奇的时光 比前有险阻更可怕的 是一潭死水 不会流动
没有活源 更提波澜？
了解你周围的一切。即使是路边的杂草或者池塘里的原生物，也远比人类发明的任何装置要复杂难解得多。 ——爱德华·威尔逊（美国博物学家） 我们走在路上看到常见植物，很难说得出它们的名字。某些文章中常出现“看到一大片绿色植物”，到底是什么植物，作者也不一定知道。 当然，知识海量，中...
家访工作是学校教育教学工作的一个重要组成部分，作为班主任教师，要搞好教育教学工作，一定要与家长联系，双方只有同心协力，才能事半功倍，达到教育目的。2016年12月和2017年1月，我与樊建民老师进行了为期两个月的家访工作，我们走街串巷，深入学生家庭，与家长面对面交谈...博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)149被浏览54,886分享邀请回答102 条评论分享收藏感谢收起博客分类：
可以试试这样：
- (UIViewController*)topViewController {
return [self topViewControllerWithRootViewController:[UIApplication sharedApplication].keyWindow.rootViewController];
- (UIViewController*)topViewControllerWithRootViewController:(UIViewController*)rootViewController {
if ([rootViewController isKindOfClass:[UITabBarController class]]) {
UITabBarController* tabBarController = (UITabBarController*)rootViewC
return [self topViewControllerWithRootViewController:tabBarController.selectedViewController];
} else if ([rootViewController isKindOfClass:[UINavigationController class]]) {
UINavigationController* navigationController = (UINavigationController*)rootViewC
return [self topViewControllerWithRootViewController:navigationController.visibleViewController];
} else if (rootViewController.presentedViewController) {
UIViewController* presentedViewController = rootViewController.presentedViewC
return [self topViewControllerWithRootViewController:presentedViewController];
return rootViewC
浏览: 96693 次
来自: 武汉
楼主，你用的比较老的版本了，现在的版本是有区分平台的进行消息发 ...
非常感谢楼主抛砖引玉，提供了这个问题的解决方案。我根据你提供的 ...
楼主有重新编译的jar包没？发一个 。Unitils3.3的m ...
用Unitils 3.3默认依赖的dbunit 2.2.2版本 ...
happyJavaer 写道求解决方案啊，除了这两种之外楼主想 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'