微信小程序选项卡切换+导航栏顶部悬浮

选项卡的切换还是我们经常做的样式，那么如果选项卡下的内容过多，页面滑动的时候，如何将切换的导航栏固定在页面上方呢?这个我也看了网上的很多方案，做了很多尝试，选项卡滑动到页面顶部无法进行切换的问题也做了一些参照和修改，下面是修改后的效果：

顶部悬浮+选项卡切换.gif

今天特别懒，还是直接放代码吧

• WXML

  
  
    
      
        
          
        
      
    

    
    
      
        
          介绍
          
        
        
          推荐
          
        

        
          评价
          
        
      

    

    
    
      
        
      
    

    
    
      
        
      
    
    
    
    
    
  


评价

• WXSS

/* pages/index/repair/storeInfo.wxss */

page {
  width: 100%;
  height: auto;
  background: #f3f3f3;
}
.swiper-home {
  height: 30vh;
  width: 100%;
}
.block-box {
  height: 30vh;
  width: 100%;
}
.repair-img {
  width: 100vw;
  height: 30vh;
}
.nav {
  background: white;
  z-index: 99;
  box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
  -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}
.positionFixed {
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/
  -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
}

/* 这个属性特别重要！！不然样式会崩掉 */
.topTabSwiper:after {
  content: "";
  clear: both;
  display: block;
}
.one-tab {
  width: 26vw;
  float: left;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.tab-title-select {
  color: lightcoral;
  font-size: 32rpx;
}
.tab-title {
  font-size: 32rpx;
}
.one-tab-line {
  width: 10vw;
  border-bottom: 6rpx solid lightcoral;
  margin-left: 8vw;
  margin-top: 1vh;
  margin-bottom: 0.2vh;
}
.center-tab {
  width: 48vw;
  float: left;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.two-tab-line {
  width: 10vw;
  border-bottom: 6rpx solid lightcoral;
  margin-left: 19vw;/*（48-10)/2让红线处在选项的中间*/
  margin-top: 1vh;
  margin-bottom: 0.2vh;
}
.tab {
  float: left;
  width: 26vw;
  text-align: center;
  padding: 10rpx 0;
  height: 5.2vh;
  line-height: 4.6vh;
}
.one-page {
  background: white;
  margin-top: 1vh;
}
.two-page{
    background: white;
  margin-top: 1vh;
}
.recommend-img{
  width: 100vw;
  height: 36vh;
}

• JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    autoplay: false, //是否自动播放
    circular: true, //是否采用衔接滑动
    indicatorDots: true, //是否显示面板指示点
    scrollTop: '', //滑动的距离
    navFixed: false, //导航是否固定
    currentData: 0,
    pictures: [
      "http://pic1.win4000.com/wallpaper/7/58981aef2947c.jpg",
      "http://pic1.win4000.com/wallpaper/b/535f2c92cbe2a_270_185.jpg",
      "http://img3.imgtn.bdimg.com/it/u=143763430,3849919589&fm=15&gp=0.jpg",
      "http://img1.imgtn.bdimg.com/it/u=638880771,1982449750&fm=15&gp=0.jpg"
    ],
    recommendPictures: [
      "http://img3.imgtn.bdimg.com/it/u=338895088,3780206663&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=2598427595,2652637564&fm=15&gp=0.jpg",
      "http://img1.imgtn.bdimg.com/it/u=3806547188,2585718081&fm=15&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=720416758,2573876011&fm=26&gp=0.jpg",
      "http://img5.imgtn.bdimg.com/it/u=1334930434,597258493&fm=26&gp=0.jpg"
    ]
  },

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

    /** 设备信息 */
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
  },


  // 获取当前滑块的index
  bindchange: function(e) {
    console.log('获取当前滑块的index')
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent: function(e) {
    console.log('点击切换')
    const that = this;
    console.log(e.target.dataset.current)
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },

  //监听滑动
  layoutScroll: function(e) {
    this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
    // console.log(this.data.scrollTop)
    // console.log(this.data.navFixed)

    /** 我这里写了固定值 如果使用rpx 可用query可以动态获取其他的高度 然后修改这里值 */
    /** 获取方法参考文档 */

    /** scrollTop 在模拟器上检测不是太灵敏 可在真机上测试 基本上不会出现延迟问题 */
    var navtopHeight = 160;
    if (this.data.scrollTop <= -navtopHeight) {
      this.setData({
        navFixed: true
      })
    } else {
      this.setData({
        navFixed: false
      })
    }
  },
})

本篇分享就到这里了，如果你在这篇文章里发现了什么问题或者说有更好的建议，麻烦在评论区留下你的意见