微信小程序 导航tab切换，跟随滚动置顶

Posted 2020-12-31 小灵子的小园子

<view class="small_nav {{tabFixed?‘small_navFix‘:‘‘}}" id="tab-con">
    <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}">
      <view class="small_nav_scroll">
        <view class="{{id==‘‘?‘cur‘:‘ ‘}}"   data-id=""  bindtap="switchNav">全部</view>
        <view class="{{id==item.categoryId?‘cur‘:‘ ‘}}"  wx:for="{{typeList}}" wx:key="index" data-id="{{item.categoryId}}" data-index="{{index}}" bindtap="switchNav">{{item.categoryName}}</view>
      </view>
    </scroll-view>
</view>
<view style="height:3000rpx;">
  这是内容
</view>

.small_nav{width:100%; background: #fff; font-size: 26rpx;margin-bottom:20rpx;}
.small_nav_scroll{ display: flex; height:80rpx;line-height:80rpx; flex-direction: column; flex-wrap: wrap;  }
.small_nav_scroll>view{  padding:0 5rpx; margin:0 25rpx;text-align: center; position:relative;}
.small_nav_scroll>view.cur{ color:#000;}
.small_nav_scroll>view.cur:after{content: " ";position: absolute;left:0; bottom:0; width:100%;height:5rpx; background: #36ccf9}
.small_navFix{width:100%;height:auto; position: fixed;top:0; left:0; z-index: 20}

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollLeft: 0,
    id: "",
    typeList: [
      {
        categoryId: 1,
        categoryName: "分类1"
      },
      {
        categoryId: 2,
        categoryName: "分类2"
      },
      {
        categoryId: 3,
        categoryName: "分类3"
      },
      {
        categoryId: 4,
        categoryName: "分类4"
      },
      {
        categoryId: 5,
        categoryName: "分类5"
      },
      {
        categoryId: 6,
        categoryName: "分类6"
      },
      {
        categoryId: 7,
        categoryName: "分类7"
      },
      {
        categoryId: 8,
        categoryName: "分类8"
      },
      {
        categoryId: 9,
        categoryName: "分类9"
      }
    ]
  },

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var that = this;
    var query = wx.createSelectorQuery()
    query.select(‘#tab-con‘).boundingClientRect(function (res) {
      that.setData({
        tabScrollTop: res.top + 100   //根据实际需求加减值
      })
    }).exec()
  },
  onPageScroll: function (e) { // 获取滚动条当前位置
    if (e.scrollTop > this.data.tabScrollTop) {
      this.setData({
        tabFixed: true
      })
    } else {
      this.setData({
        tabFixed: false
      })
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  //切换产品类别
  switchNav: function (e) {
    const { offsetLeft } = e.currentTarget;
    const { id, index } = e.currentTarget.dataset;
    var clientX = e.detail.x;
    if (this.data.id == e.currentTarget.dataset.id) {
      return false;
    }
    if (clientX < 60) {
      this.setData({
        scrollLeft: offsetLeft - 60
      });
    } else if (clientX > 330) {
      this.setData({
        scrollLeft: offsetLeft
      });
    }
    this.setData({
      id: id
    });
  },
})