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

àì夳堔傛蜴生んèń 2021-09-30 16:40 428阅读 0赞

<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
        });
      },
    })

转载于:https://www.cnblogs.com/xiao-ling-zi/p/9512031.html