微信小程序点击标签滑动到相应内容，滚动内容切换相应标签实现

这个是需要实现的效果（点击上面的标签自动滚动到相应内容，滚动内容也会自动切换上面的标签）

34382146037140_.pic.jpg

先来看一下代码：

js文件中Page里定义数据（上面需要显示的标签内容）：

data: {
    current: {
      menu: 1
    },
    menus: [{
        id: 1,
        text: '房间',
        active: true,
        scrollSubviewId: "roomList",
        hidden: false,
      },
      {
        id: 2,
        text: '美宿介绍',
        active: false,
        scrollSubviewId: "introduce",
        hidden: false,

      },
      {
        id: 3,
        text: '独一份',
        active: false,
        scrollSubviewId: "mall",
        hidden: true,
      },
      {
        id: 4,
        text: '推荐',
        active: false,
        scrollSubviewId: "recommend",
        hidden: true,
      },
      {
        id: 5,
        text: '热评',
        active: false,
        scrollSubviewId: "comment",
        hidden: true,
      }
    ],
    top: 0,
  },

wxml文件中代码

<view class="top-tab">
  <block wx:for="{{menus}}" wx:key="menu.list">
    <view class="top-tab-item{{item.active ? ' active' : ''}}" bindtap="scrollToView" data-item="{{item}}" hidden='{{item.hidden}}'>{{item.text}}</view>
  </block>
</view>

  scrollToView: function(e) {
    var item = e.currentTarget.dataset.item || {};
    var menus = this.data.menus;
    menus.forEach((f) => {
      if (f.id == item.id)
        f.active = true;
      else
        f.active = false;
    });
    this.setData({
      menus: menus,
      'current.menu': item.id,
      toView: item.scrollSubviewId,
      tapMenu: true
    });
  },
  scrollDidScroll: function(e) {
    var top = e.detail.scrollTop;
    if (top > 20) {
      if (!this.data.showBackTopView) {
        this.setData({
          showBackTopView: true,
        });
      }
    } else {
      if (this.data.showBackTopView) {
        this.setData({
          showBackTopView: false,
        });
      }
    }
    if (this.data.tapMenu) {
      this.setData({
        tapMenu: false,
      });
      return;
    }
    var introduceTop = this.data.introduceTop;
    var mallTop = this.data.mallTop || (introduceTop + this.data.introduceHeight);
    var recommendTop = this.data.recommendTop || (mallTop + this.data.mallHeight);
    var commentTop = this.data.commentTop || (recommendTop + this.data.recommendHeight);
    var id = 1;
    if (top > commentTop) {
      id = 5;
    }
    if (this.data.recommendHeight > 0) {
      if (top > recommendTop && top < (this.data.commentHeight > 0 ? commentTop : Number.POSITIVE_INFINITY)) {
        id = 4;
      }
    }
    if (this.data.mallHeight > 0) {
      if (top > mallTop && top < (this.data.recommendHeight > 0 ? recommendTop : (this.data.commentHeight > 0 ? commentTop : Number.POSITIVE_INFINITY))) {
        id = 3;
      }
    }
    if (top > introduceTop && top < (this.data.mallHeight > 0 ? mallTop : (this.data.recommendHeight > 0 ? recommendTop : (this.data.commentHeight > 0 ? commentTop : Number.POSITIVE_INFINITY)))) {
      id = 2;
    }
    if (top < introduceTop && top > 0) {
      id = 1;
    }
    if (this.data.current.menu != id) {
      var menus = this.data.menus;
      menus.forEach((f) => {
        if (f.id == id)
          f.active = true;
        else
          f.active = false;
      });
      this.setData({
        menus: menus,
        'current.menu': id
      });
    }
  },
  getTops: function() {
    var that = this;
    var menus = this.data.menus;
    for (let i = 0; i < menus.length; i++) {
      if (!menus[i].hidden) {
        var query = wx.createSelectorQuery() //创建节点查询器
        let floorID = '#' + menus[i].scrollSubviewId;
        query.select(floorID).boundingClientRect()
        query.selectViewport().scrollOffset()
        query.exec(function(res) {
          if (res[0]) {
            var result = res[0];
            if (result.id == 'introduce') {
              that.setData({
                introduceTop: result.top,
                introduceHeight: result.height || 0,
              });
            } else if (result.id == 'mall') {
              that.setData({
                mallTop: result.top,
                mallHeight: result.height || 0,
              });
            } else if (result.id == 'recommend') {
              that.setData({
                recommendTop: result.top,
                recommendHeight: result.height || 0,
              });
            } else if (result.id == 'comment') {
              that.setData({
                commentTop: result.top,
                commentHeight: result.height || 0,
              });
            }
          }
        })
      }
    }
  },