小程序实现自定义顶部选项栏

---

前言

在小程序常常会用到选项栏来展示内容，而官方提供的自定义 tabBar 是配置的是不同的页面且必须在底部，因此无法满足想在同一个页面显示不同的内容或想让选项栏在顶部的需求。面对这种情况，只能引入第三方组件库或自己编写一个选项栏。

---

一、页面效果

1.两栏：


2.四栏：

二、代码

wxml 代码：

<!--顶部选项栏-->
<view class='swiper-nav'>
  <view wx:for="{{swiperNav}}" wx:key="{{index}}" class='item-nav {{item.cond ? "active" : ""}}'  data-index="{{index}}"  bindtap='swiperNav'>{{item.tabName}}</view>
</view>
<view  wx-if="{{swiperNav[0].cond}}">内容1</view>
<view  wx:if="{{swiperNav[1].cond}}">内容2</view>
<!--<view  wx:if="{{swiperNav[2].cond}}">内容3</view>
<view  wx:if="{{swiperNav[3].cond}}">内容4</view>-->

js 代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //顶部选项栏内容数组
    swiperNav:[
      {
        tabName:'选项1',
        cond: true
      },
      {
        tabName:'选项2',
        cond: false
      },
      /*{
        tabName:'选项3',
        cond: false
      },
      {
        tabName:'选项4',
        cond: false
      }*/

    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  //顶部选项栏切换函数
  swiperNav: function(e){
    console.log(e.currentTarget.dataset.index)
    let index = e.currentTarget.dataset.index;
    var arr = this.data.swiperNav;
    for(let i = 0; i< arr.length; i++)
    {
      if(i == index){
        arr[i].cond = true;
      }else{
        arr[i].cond = false;
      }
    }
    this.setData({
        swiperNav : arr
      })
  },
  
})

wxss 代码：

/* 顶部选项栏样式 */
.swiper-nav {
  background-color: #fff;
  width: 100%;
  height: 115rpx;
  padding: 0;
  display: flex;
}

.swiper-nav .item-nav {
  flex: 1;
  height: 110rpx;
  line-height: 110rpx;
  text-align: center;
  color: #9fa0a2;
  font-size: 36rpx;
}

/* 实现选项栏选中效果 */
.swiper-nav .active {
  color: #86aafc;
  border-bottom: 5rpx solid #7da4fc;
}

---

总结

从代码上看，原理不难理解，样式也比较简单，不过功能效果已经实现了。另外选项栏的设置放在 js 中实现，允许我们动态去设置选项栏中的选项数量，当然视图和样式上也可以按需调整。