小程序导航栏

效果

页面

<!--pages/NCPQualitySafety/planting/information.wxml-->
<wxs src="../../../utils/filter.wxs" module="filters" />
<view class="container">
  <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{false}}">
    <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">
        {{navItem.text}}</view>
    </block>
  </scroll-view>
  <!-- 页面内容 -->
  <!-- 页面内容 -->
  <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
   
    <swiper-item class="tab-content">
    第一个内容
     </swiper-item>
    <swiper-item class="tab-content">
    第二个内容
         </swiper-item>
             <swiper-item class="tab-content">
    第三个内容
         </swiper-item>
           </swiper>
</view>

JS

data：{
 navScrollLeft: 0,
     currentTab: 0,
  navData: [
 
      {
        text: '人兽共患病'
      },
      {
        text: '一般宠物传染病'
      },
      {
        text: '其他宠物疾病'
      },
     
     
    ],
}
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    //console.log(event)
    //每个tab选项宽度占1/5
    var singleNavWidth = this.data.windowWidth / 2;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },

样式

.nav {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.nav-item {
  /* width: 30%; */
  padding-left:20px;
  padding-right: 20px;
  display: inline-block;
  text-align: center;
}
.nav-item.active {
  line-height: 70rpx;
  text-align: center;
  color: #1485ee;
  flex: 1;
  border-top: 0px;
  border-bottom: 3px solid #1485ee;
  font-weight: bold;
  font-size: 28rpx;
}
.scroll-view {
  /*width:228px;*/
  font-size:13px;
  width: 50%;
  height: 220px;
  position: fixed;
  margin-top: 48px;
  /* text-align: center; */
  margin-left: 120px;
  /* margin-left: 65px;  */
  /* background-color: #cbcbcbf8; */
  /* background-color: #6464648c; */
  background-color: #e7e7e7;
  -moz-box-shadow: 0px 0px 2px #e2e2e2;
  -webkit-box-shadow: 0px 0px 2px #e2e2e2;
  box-shadow: 0px 0px 2px #e2e2e2;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    
  z-index:3;
}