微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
- 固定导航栏
- 可滑动导航栏
顶部导航栏的需求实现：
-
顶部导航栏由列表渲染，通过tabclick点击事件改变activeIndex变量的当前值，从而控制weui-navbar-item的切换。
-
wxml获取activeIndex的当前值，通过view组件的hidden="{{activeIndex!=x}}"属性选择性隐藏其余activeIndex下的页面，只显示当前activeIndex下的页面，当然也可以适当修改wxml灵活选择不同的页面显示或隐藏。
固定导航栏和可滑动导航栏区别在于：
-
效果上：可滑动导航栏承载的页面数量远超过固定导航栏，不仅可以滑动导航栏，而且点击边缘处的native-item时会自动使native-item处于页面中；
-
原理上：tabClick点击事件只是单单改变activeIndex的当前值，switchNav点击事件除此之外同时改变navScrollLeft的大小以实时改变scroll-view组件的scroll-left属性，达成切换页面时的动画效果。
固定导航栏
效果示意图：
代码：
wxml
<view class="page">
<view class="page__bd">
<view class="weui-tab">
<view class="weui-navbar">
<block wx:for="{{tabs}}" wx:key="*this">
<view id="{{index}}" class="weui-navbar-item {{activeIndex == index ? 'weui-navbar-item-on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
</view>
<view class="weui-tab__panel">
<!-- 第1个页面 -->
<view class="weui-tab__content" hidden="{{activeIndex != 0}}">
1
</view>
<!-- 第2个页面 -->
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">
2
</view>
<!-- 第3个页面 -->
<view class="weui-tab__content" hidden="{{activeIndex != 2}}">
3
</view>
<!-- 第4个页面 -->
<view class="weui-tab__content" hidden="{{activeIndex != 3}}">
4
</view>
<!-- 第5个页面 -->
<view class="weui-tab__content" hidden="{{activeIndex != 4}}">
5
</view>
</view>
</view>
</view>
</view>
js
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
const app = getApp()
Page({
data: {
tabs: ["标题A", "标题B", "标题C", "标题D", "标题E"],
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0
},
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
});
}
});
that.setData({
activeIndex: options.activeIndexData
})
},
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
})
}
})
wxss
page,
.page,
.page__bd {
height: 100%;
}
.page__bd {
padding-bottom: 0;
}
.weui-tab__content {
padding-top: 60px;
text-align: center;
font-size: 32rpx;
}
.weui-navbar {
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 500;
width: 100%;
height: 95rpx;
flex-direction: row;
text-align: center;
color: #A8A8A8;
font-size: 32rpx;
box-sizing: border-box;
background-color: #FFF;
border-bottom: 1rpx solid #DFDFDF;
}
.weui-navbar-item {
flex: 1;
padding: 26rpx 0px;
}
.weui-navbar-item-on {
transition: all 0.3s;
border-bottom: 10rpx solid #478ff3;
color: #478ff3;
}
可滑动导航栏
效果示意图：
代码：
wxml
<view class="page">
<!-- tab导航栏 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
<text>{{navItem}}</text>
</view>
</block>
</scroll-view>
<!-- 页面内容 -->
<view class="weui-tab__panel">
<!-- 第1个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 0}}">
1
</view>
<!-- 第2个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 1}}">
2
</view>
<!-- 第3个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 2}}">
3
</view>
<!-- 第4个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 3}}">
4
</view>
<!-- 第5个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 4}}">
5
</view>
<!-- 第6个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 5}}">
6
</view>
<!-- 第7个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 6}}">
7
</view>
<!-- 第8个页面 -->
<view class="weui-tab__content" hidden="{{currentTab != 7}}">
8
</view>
</view>
</view>
js
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
const app = getApp()
Page({
data: {
navData: ["标题A", "标题B", "标题C", "标题D", "标题E", "标题F", "标题G", "标题H"],
currentTab: 0,
navScrollLeft: 0,
},
onLoad() {
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
switchNav(event) {
var cur = event.currentTarget.dataset.current;
//每个tab选项宽度占1/5
var singleNavWidth = this.data.windowWidth / 5;
//tab选项居中
this.setData({
navScrollLeft: (cur - 2) * singleNavWidth
})
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
}
})
wxss
.weui-tab__content {
padding-top: 100rpx;
text-align: center;
font-size: 32rpx;
}
.nav {
height: 86rpx;
text-align: center;
color: #A8A8A8;
font-size: 4vw;
background-color: #FFF;
border-bottom: 1rpx solid #DFDFDF;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.nav-item {
width: 22%;
display: inline-block;
text-align: center;
}
.nav-item.active {
transition: all 0.3s;
border-bottom: 10rpx solid #478ff3;
color: #478ff3;
}