小程序菜单楼层联动

1.点击菜单切换楼层就不细说了，直接根据scroll-view标签自带的属性scroll-into-view俩动态更改id就OK了！

wxml

<view style='position:relative;'>
    <scroll-view class='select {{navPosFixed ? "scrollpos" : "index-scroll"}}' scroll-x="true" scroll-into-view='{{currentNavItem}}' scroll-with-animation>
      <view wx:for='{{scrollNav}}' class='scroll-list ' data-id='{{item.cid}}' data-num="{{index}}" bindtap='tabFloor' id='{{"nav-item_" + index}}'>
        <view class='list-title {{index==num ?"index-scrollctived": ""}}'>
          <text>{{item.name}}</text>
          <view class='textdirection' hidden='{{index!=num}}'></view>
        </view>
      </view>
    </scroll-view>
    <!-- 占位用，导航栏切换为fixed之后页面高度不会变化 -->
    <!-- 这里认为导航栏定高120rpx -->
    <view id='nav_placeholder' style='height:120rpx;'></view>

    <view wx:for='{{scrollNav}}' wx:for-item='item' class='content-list' id='{{"IntoView"+item.cid}}'>
      <view class='content-title'>
        <image src='/images/lefticon@2x.png'></image>
        <text style='display:inline-block;margin:0 10rpx;'>{{item.name}}</text>
        <image src='/images/righticon@2x.png'></image>
      </view>
      <view class='content-box'>
        <view wx:for='{{scrollContent[item.cid]}}' wx:for-item='listitem' class='content-box-list'>
          <image src='{{listitem.image}}' style='max-width:160rpx;max-height:160rpx;'></image>
          <view class='content-box-price'>
            <view>
              <text class='price-text1 fontweight'>{{listitem.name}}</text>
              <text class='price-text2'>今日最低</text>
            </view>
            <text class='price-text3'>{{listitem.price}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

js

const app = getApp()
let global_timer;
let global_listItemTop = [];
Page({
    data: {
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        scrollNav: [],
        scrollContent: [],
        num: '',
        scrollTop: 0,
        navTop: ' ',
        contentTop: ' ',
        toView: "IntoView",
        isShare: false,
        moveShare: {},
        moveImages: []
    },
    //点击菜单切换楼层
    tabFloor: function(e) {
        var showId = e.currentTarget.dataset.id;
        this.setData({
            toView: "IntoView" + showId,
            num: e.currentTarget.dataset.num
        })
    },
    onReady: function () {
        //根据节点#nav_placeholder是否可见来决定导航栏的position
        this._observer = wx.createIntersectionObserver(this)
        this._observer
            .relativeTo('.container')
            .observe('#nav_placeholder', (res) => {
                console.log('res:', res);
                this.setData({
                    navPosFixed: res.intersectionRatio <= 0
                });
            });
    },
    //获取所有列表项的top
    getListItemTop: function () {
        let query = wx.createSelectorQuery();
        query.selectAll('.content-list').boundingClientRect();
        query.exec(res => {
            let rects = res[0];
            console.log('rects:', rects)
            rects.forEach((rect) => {
                global_listItemTop.push(rect.top);
            });
        });
        this.getListItemTop = null;
    },
    //y轴滚动
    pageScroll: function(res) {
        clearTimeout(global_timer);
        global_timer = setTimeout(this.updateNav, 60, res);
    },
    //更新导航栏状态
    updateNav: function(res) {
        typeof this.getListItemTop === 'function' && this.getListItemTop();
        let scrollTop = res.detail.scrollTop;
        let num = 0;
        let currentNavItem = 'nav-item_0';

        for (let i = 0; i < global_listItemTop.length; i++) {
            let itemTop = global_listItemTop[i];

            if (scrollTop > itemTop) {
                num = i;
                i > 3 && (currentNavItem = `nav-item_${i}`);
            } else {
                break;
            }
        }
        this.setData({
            num,
            currentNavItem
        });
    }
})