小程序上下滑動頁面,同時切換導航欄選中狀態

 

 

 

 

 

 

 

注意:

1.小程序上下滑動頁面,只通過當前划出頂部距離這一個值去判斷選中狀態,不要用元素離頂部的距離判斷選中狀態

2.點擊導航欄不要切換選中樣式,樣式改變只能通過判斷所在位置,否則會出現選中樣式來回閃爍

3.獲取元素頂部距離和高度是異步,需要隔一段時間再去獲取,並且只需在onReady中獲取一次

/**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    var that=this;
    setTimeout(function(){
      var query=wx.createSelectorQuery();
      query.select('.head').boundingClientRect();
      query.select('.zhengce').boundingClientRect();
      query.select('.tuwen').boundingClientRect();

　　　　// 獲取每個元素頂部距離和高度

      query.exec(function(res){
        console.log(res)
        that.setData({
          query:res,
        })
      })
    },500)
    
  },
  /**
   * 頁面滾動
   */
  onPageScroll:function(e){
    var that=this;
    console.log(e.scrollTop)
    console.log(that.data.query)

　　　// 大於元素頂部距離,小於頂部距離+元素高度,60為導航欄高度

if(e.scrollTop>=0 && e.scrollTop<=that.data.query[0].height-60){
      that.setData({
        tab_dian:1,
      })
    }
    if(e.scrollTop>=that.data.query[1].top-60 && e.scrollTop<=that.data.query[1].top+that.data.query[1].height-60){
      that.setData({
        tab_dian:2,
      })
    }
    if(e.scrollTop>=that.data.query[2].top-60 && e.scrollTop<=that.data.query[2].top+that.data.query[2].height-60){
      that.setData({
        tab_dian:3,
      })
    }
  },