Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动

Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动

页面股东tab悬停原理：

运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息，即节点距离页面顶部的距离，再通过uniapp原生监听页面滚动事件onPageScroll，获取页面内容滚动的高度，二者相加即定位到对应节点的滚动距离。

1.页面template结构

  data() {
    return {
      curTab: 0,
      isTabFixed: false,
      tabTop: 0,  // tab距离顶部的距离
      curClassName: '',
      pageScrollTop: 0
    }
  },
  computed() {
    detailTabs() {
      let tabs = [{
        name: '正文详情',
        className: '.library-detail-content'
      }]
      if(this.attachment && this.attachment.length > 0) {
        tabs.splice(1, 0, {
          name: '相关附件',
          className: '.library-detail-attachment'
        })
      }
      if(this.relatedPosts && this.relatedPosts.length > 0) {
        tabs.splice(2, 0, {
          name: '图文解读',
          className: '.library-detail-relatedPosts'
        })
      }
      return tabs
    },
  }

微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索

2.定义变量

  data() {
    return {
      curTab: 0,
      isTabFixed: false,
      tabTop: 0,  // tab距离顶部的距离
      curClassName: '',
      pageScrollTop: 0
    }
  },
  computed() {
    detailTabs() {
      let tabs = [{
        name: '正文详情',
        className: '.library-detail-content'
      }]
      if(this.attachment && this.attachment.length > 0) {
        tabs.splice(1, 0, {
          name: '相关附件',
          className: '.library-detail-attachment'
        })
      }
      if(this.relatedPosts && this.relatedPosts.length > 0) {
        tabs.splice(2, 0, {
          name: '图文解读',
          className: '.library-detail-relatedPosts'
        })
      }
      return tabs
    },
  }

微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索

3.方法定义

  // 点击tab滚动事件（这一部分如果不需要页面滚动与tab联动，就不需要）
  scrollTo(tab, className) {
      if(!className) return
      if(this.curClassName == className) return
      this.curTab = tab
      const query = uni.createSelectorQuery().in(this);
      query.select(className).boundingClientRect(data => {
        uni.pageScrollTo({
          scrollTop: className == '.library-detail-content' ? 0 : (data?.top + ((this.pageScrollTop || 0))),
          duration: 300
        })
      }).exec();
 
      this.curClassName = className
    },
 
// uni页面滚动监听事件
  onPageScroll(e) {
    this.pageScrollTop = e.scrollTop;
    // 获取tabs的距离顶部的距离
    this.tabTop = uni.createSelectorQuery().select('.content-tabs').boundingClientRect(data => {
      this.tabTop = data.top;
      this.isTabFixed = (this.pageScrollTop > 296)  // 这里是this.tabTop，定位好写死
      // 通过一下日志代码观察高度，以确定什么高度作为悬停的判断，这里296即为确定好的高度
	  console.log("scrollTop=>",this.scrollTop)
    }).exec();
  },

4.css补充

    .is-fixed {  
	  position: fixed;  
	  top: 0;  
	  width: 100%;  
	  z-index: 999; //使其显示在最前面
	}

5.实现效果

微信搜索【蜜蜂网盘搜so】小程序，万部短剧、各种资源任意搜索