小程序菜单楼层联动

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

wxml

    
      
        
          {{item.name}}
          
        
      
    
    
    
    

    
      
        
        {{item.name}}
        
      
      
        
          
          
            
              {{listitem.name}}
              今日最低
            
            {{listitem.price}}
          
        
      
    
  

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