小程序 固定分类导航 点击栏目滑动到相应内容

1：先看一下效果图，点击对应栏目，页面滑动到对应的分类内容。

 

2：第一步先实现页面内容；

  
    {{item.name}}
      
    
  

 



 
      
          
            
            已售：200
          
          {{item.title}}
          {{item.desc}}
      

3:设置滑动部分的高度；

onLoad: function(res) {
    var that = this;
    //设置商品列表高度
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          height: res.windowHeight + 380,
        })
      },
    });
  },

4：点击导航栏目，滑动到对应商品；

  tap: function(e) {
    console.log(e);
    var id = e.currentTarget.dataset.id;
    var index = e.currentTarget.dataset.index;
    this.setData({
      toView: id,
      navActive: index
    });
  },

5：滑动页面，对应导航active；

//首先要获取部分内容距离顶部的高度，滑动的时候监听高度是否到达对应位置；

// 获取商品列表，生成高度集合
        var height = 0;
        var hightArr = []; 
        for (var i = 0; i < that.data.goodlist.length; i++) { //这里的goodlist指对应商品集合
            //获取元素所在位置
          var query = wx.createSelectorQuery();
          var idView="#b"+i;
          query.select(idView).boundingClientRect()
          query.exec(function (res) { 
            var top = res[0].top; 
            hightArr.push(top); 
            that.setData({
              hightArr: hightArr
            });
          });
        } ;


// 页面滑动到相应位置 对应导航提示
   scroll:function(e){
    var scrollTop = e.detail.scrollTop + 400;
    var scrollArr=this.data.hightArr;
       for (var i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[0]) {
          if (0 != this.data.lastActive) {
            this.setData({
              navActive: 0,
              lastActive: 0
            })
          }
        } else if (scrollTop >= scrollArr[i - 1] && scrollTop <= scrollArr[i]) {
          if (i != this.data.lastActive) {
            this.setData({
              navActive: i,
              lastActive: i
            })
          }
        }
      }
  },