微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
固定导航栏可滑动导航栏顶部导航栏的需求实现：
顶部导航栏由列表渲染，通过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/5var 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;}
