大多数的软件都会有一个甚至多个导航栏（选项卡或者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 上的文字选中时的颜色
"list": [
{
"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>
</view>
<view class='content'><text>{{tabList[current]}}</text></view>
index.wxss：
page {
display: flex;
flex-direction: column;
height: 100%;
}
.tablist {
display: flex;
background: #f5f5f5;
height: 80rpx;
}
.tablist .item {
flex: auto;
display: flex;
position: relative;
justify-content: center;
align-items: center;
font-size: 11pt;
color: #353535;
}
.tablist .item.select {
color: #e64340;
}
.tablist .item.select::after {
content: "";
height: 3rpx;
display: block;
position: absolute;
left: 0;
bottom: 0;
right: 0;
background: #e64340;
}
.content{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
index.js：
Page({
data: {
tabList: ['首页', '活动', '我的'],
current: 0,//当前选中的Tab项
},
onLoad: function () {
},
/**
* Tab的点击切换事件
*/
tabItemClick: function (e) {
this.setData({
current: e.currentTarget.dataset.pos
})
},
})
实现效果没什么难度，唯一比较吸引我的是伪类（::after），以前做Android没有接触过这个东西，感觉这个东西好拽，不仅仅是下边的选中横线，还可以用它来实现上尖角三角形和下尖角三角形，以及尖角箭头等效果，省去切图的琐事，不用在叨扰美工来切图了。贴个有助于理解的网址吧你所不知的 CSS ::before 和 ::after 伪元素用法，不懂得可自行百度理解。
看一下效果：
顶部导航栏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>
</view>
</swiper-item>
</swiper>
index.wxss：
.out{
flex: auto;
width: 100%;
}
index.js：
/**
* 内容区域swiper的切换事件
*/
contentChange: function (e) {
this.setData({
current: e.detail.current
})
},
自定义的导航栏和swiper同时使用一个current，这就将两个组件关联起来，一个变，另一个也会跟着改变。
顶部导航栏2.png
现在底部也可以划动了，初步效果实现，但是还差点feel，顶部是写死的三个，那我按照微信的来说写2-5个也是没问题的，那要是再多点，六七个或者更多呢，那都挤在里面想想都丑死。继续干！
crowd.png
那就需要把顶部导航栏外面的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>
</block>
</view>
</view>
</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内容略 -->
</view>
</block>
</scroll-view>
</swiper-item>
</block>
</swiper>
orderList.wxss：
/* 顶部TabList */
.scroll-view_H {
background: #fff;
height: 80rpx;
margin: 0rpx;
padding: 0rpx;
position: absolute;
z-index: 50;
top: 0rpx;
left: 0rpx;
border-bottom: 1rpx solid #eee;
}
.out {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #fff;
}
.table-out {
width: 100%;
height: 100%;
white-space: nowrap;
display: flex;
margin: 0rpx;
padding: 0rpx;
}
.table-name {
width: 140rpx;
padding: 20rpx 20rpx 14rpx 20rpx;
color: #353535;
font-size: 11pt;
box-sizing: border-box;
position: relative;
}
.table-name.active {
padding: 20rpx 20rpx 14rpx 20rpx;
color: #e64340;
font-size: 11pt;
box-sizing: border-box;
}
.table-name.active::after {
content: '';
background: #e64340;
display: block;
height: 6rpx;
position: absolute;
left: 20rpx;
right: 20rpx;
bottom: 0rpx;
}
.table-line {
width: 60rpx;
height: 6rpx;
background-color: #e64340;
position: absolute;
bottom: 0rpx;
box-sizing: border-box;
}
orderList.js：
/**
* Table选择事件
*/
tableSelected: function (e) {
let pos = e.currentTarget.dataset.pos;
let list = this.data.orderList;
let scrollTop = this.data.scrollTop;
this.setData({
current: pos,
})
if (pos == 5) {
this.setData({
id: 6,
scrollTop: 150,
})
} else if (pos <= 4) {
this.setData({
id: 0,
scrollTop: 0,
})
}
},
/**
* 底部滑动事件
*/
bindChange: function (e) {
let pos = e.detail.current;
let list = this.data.orderList;
this.setData({
current: e.detail.current
})
if (pos == 5) {
this.setData({
id: 6,
scrollTop: 150,
})
} else if (pos == 4) {
this.setData({
id: 0,
scrollTop: 0,
})
}
},
效果如下：
顶部导航栏3-1.png
顶部导航栏3-2.png
这样，一个完整的导航栏就实现了，让我感觉唯一美中不足的地方是，划动过程中导航栏底部的红线没有移动的动画，下一波可以搞一下动画效果的实现。
完善版导航栏入口
网友评论