小程序scroll-view滚动时高亮对应区域的吸顶tab项

最新推荐文章于 2025-09-20 14:11:57 发布

原创最新推荐文章于 2025-09-20 14:11:57 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #tab #cisco #less

这篇博客详细介绍了如何在微信小程序中实现scroll-view组件的滚动时，区域元素出现时对应tab项自动高亮的功能。通过使用Intersection Observer观察器监听滚动位置，并结合wx.createSelectorQuery获取元素位置信息，动态更新activeView状态来实现导航栏的高亮效果。同时，展示了具体的wxml和scss代码示例。

记一下scroll-view的使用

滚动时,区域元素出现在屏幕上,对应的tab项目高亮

代码:

wxml:

<view class="sticky-menu" hidden="{{appear}}">
    <view class="item-box">
        <text class="item {{activeView=='chapter'?'active':''}}" bindtap="jumpTo" data-optg="chapter">章节</text>
        <text class="item {{activeView=='teacher'?'active':''}}" bindtap="jumpTo" data-optg="teacher">教师</text>
        <text class="item {{activeView=='school'?'active':''}}" bindtap="jumpTo" data-optg="school">学校</text>
        <text class="item {{activeView=='courses'?'active':''}}" bindtap="jumpTo" data-optg="courses">推荐</text>
    </view>
</view>

<scroll-view class="jump-list {{!appear?'mt':''}}" style="{{loaded?'height: '+scrollViewHeight*2+'rpx':''}}"
    scroll-into-view="{{toView}}" 
    scroll-y="true" 
    bindscroll="scrollTo"
    scroll-with-animation="true">

    <view class=" {{loaded?'':'lock'}}">
    ...
    </view>
    
</scroll-view>

js:

data: {
  toView: 'chapter',
  activeView: 'chapter',
  loaded: 0
},
onLoad: function(options) {
  this._observer = wx.createIntersectionObserver(this);
  this._observer.relativeTo('.jump-list').observe('.course-info', res => {
    this.setData({
      appear: res.intersectionRatio > 0
    });
  });
  setTimeout(() => {
    new Promise(resolve => {
      let query = wx.createSelectorQuery();
      query.select('#chapter').boundingClientRect();
      query.select('#teacher').boundingClientRect();
      query.select('#school').boundingClientRect();
      query.select('#courses').boundingClientRect();
      query.exec(function(res) {
        resolve(res);
      });
    }).then(res => {
      page.setData({
        chapterBoxTop: res[0].top,
        teacherBoxTop: res[1].top,
        schoolBoxTop: res[2].top,
        coursesBoxTop: res[3].top,
        loaded: 1
      });
      Toast.clear();
    });
  }, 600);
},
scrollTo(e) {
  let page = this,
    scrollTop = e.detail.scrollTop;

  if (
    scrollTop >= page.data.chapterBoxTop &&
    scrollTop < page.data.teacherBoxTop
  ) {
    page.setData({
      activeView: 'chapter'
    });
  } else if (scrollTop < page.data.schoolBoxTop) {
    page.setData({
      activeView: 'teacher'
    });
  } else if (scrollTop < page.data.coursesBoxTop) {
    page.setData({
      activeView: 'school'
    });
  } else {
    page.setData({
      activeView: 'courses'
    });
  }
},

scss:

.sticky-menu {
  position: fixed;
  width: 100%;
  z-index: 9;
  top: 0;
  background: #fff;
  font-size: 28rpx;
  padding: 16rpx 0;
  .item-box {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .item {
      color: #757575;
      &.active {
        color: #2dcb6f;
        position: relative;
        &:after {
          content: '';
          display: inline-block;
          width: 32rpx;
          height: 8rpx;
          position: absolute;
          bottom: -6rpx;
          border-radius: 4rpx;
          left: 50%;
          margin-left: -16rpx;
          background: #2dcb6f;
        }
      }
    }
  }
}

.jump-list {
  height: 100%;
  &.mt {
    margin-top: 50rpx;
  }
  .lock {
    height: 100vh !important;
    overflow: hidden;
  }
}