02_小程序——onPageScroll 你入坑了嗎?

1：你的 onPageScroll 事件是不是失靈？閑話不多說，直接上代碼！！！

<!--pages/homePage/testing/testing.wxml-->
<view class="list">
    <view class="{{ toView=='list0'?'colorBlue':'colorGray' }}">list0</view>
    <view class="{{ toView=='list29'?'colorBlue':'colorGray' }}">list29</view>
    <view class="{{ toView=='list59'?'colorBlue':'colorGray' }}">list59</view>
    <view class="{{ toView=='list89'?'colorBlue':'colorGray' }}">list89</view>
</view>
<!-- 綁定事件 開始滑動事件 滑動過程事件 滑動結束事件 -->
<scroll-view
  scroll-y = "true" 
  scroll-with-animation = "true" 
  class = "{{ heightType=='heightHandred' ? 'heightHandred' : 'heightAuto' }}"
>
    <view 
      wx:for="{{list}}"
      id="{{item}}"
      wx:key="{{index}}"
      class="knowledgeNodes">
      {{item}}
    </view>
</scroll-view>

2：js片段（監聽頁面上滑和下滑事件，當左側對應的值到達頂部，右側對應的值變藍色）。

// pages/homePage/testing/testing.js

Page({
  data: {
    tabScrollTop: 0,
    tabFixed: false,
    list: [ "list0", "list1", "list2", "list3", "list4", "list5", "list6", "list7", "list8", "list9", 
                    "list10", "list11", "list12", "list13", "list14", "list15", "list16", "list17", "list18", "list19",
                         "list20", "list21", "list22", "list23", "list24", "list25", "list26", "list27", "list28", "list29",
                         "list30", "list31", "list32", "list33", "list34", "list35", "list36", "list37", "list38", "list39",
                       "list40", "list41", "list42", "list43", "list44", "list45", "list46", "list47", "list48", "list49",
                       "list50", "list51", "list52", "list53", "list54", "list55", "list56", "list57", "list58", "list59",
                       "list60", "list61", "list62", "list63", "list64", "list65", "list66", "list67", "list68", "list69",
                       "list70", "list71", "list72", "list73", "list74", "list75", "list76", "list77", "list78", "list79",
                       "list80", "list81", "list82", "list83", "list84", "list85", "list86", "list87", "list88", "list89",
                       "list90", "list91", "list92", "list93", "list94", "list95", "list96", "list97", "list98", "list99",
                   ],
        toView: '',
        chapterTopArr: [],
        heightType: 'heightAuto'
  },
  
  onLoad: function(){
      this.initData();
  },
  
    // 獲取知識點節點 selector
    getAllKNodes: function(){
        const _this = this;
        // 循環所有 knowledgeNodes 項
      wx.createSelectorQuery().selectAll('.knowledgeNodes').boundingClientRect(rects=>{
            var chapterTopArr = [];
      rects.forEach(function(rect){
          switch (rect.id){
              case 'list9': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list19': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list29': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list39': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list49': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list59': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list69': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list79': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list89': 
                  chapterTopArr.push(rect.top);
                  break;
              case 'list99': 
                  chapterTopArr.push(rect.top);
                  break;
              default: 
                  break;
          }
      })
      _this.setData({
             chapterTopArr : chapterTopArr
         })
    }).exec()
    },
    
    // 初始化數據 (獲取當前所在章節,對應的知識點)
    initData: function(){
      this.setData({
          toView: 'list9'
      })
      this.getAllKNodes();
    },
    
    // 監聽頁面高度(上滑或者下滑)
    onPageScroll: function(res) {
        const _this = this;
        const scrollTop = res.scrollTop;
        const chapterTopArr = _this.data.chapterTopArr;
        if(chapterTopArr.length !== 0){
            if( chapterTopArr[0] <= scrollTop && scrollTop < chapterTopArr[0]){
                _this.setData({
                  toView: 'list9'
              })
            }else if( chapterTopArr[1] <= scrollTop && scrollTop < chapterTopArr[2] ){
                _this.setData({
                  toView: 'list19',
              })
            }else if( chapterTopArr[2] <= scrollTop && scrollTop < chapterTopArr[3] ){
                _this.setData({
                  toView: 'list29'
              })
            }else if( chapterTopArr[3] <= scrollTop && scrollTop < chapterTopArr[4] ){
                _this.setData({
                  toView: 'list39'
              })
            }else if( chapterTopArr[4] <= scrollTop && scrollTop < chapterTopArr[5] ){
                _this.setData({
                  toView: 'list49'
              })
            }else if( chapterTopArr[5] <= scrollTop && scrollTop < chapterTopArr[6] ){
                _this.setData({
                  toView: 'list59'
              })
            }else if( chapterTopArr[6] <= scrollTop && scrollTop < chapterTopArr[7] ){
                _this.setData({
                  toView: 'list69'
              })
            }else if( chapterTopArr[7] <= scrollTop && scrollTop < chapterTopArr[8] ){
                _this.setData({
                  toView: 'list79'
              })
            }else if( chapterTopArr[8] <= scrollTop && scrollTop < chapterTopArr[9] ){
                _this.setData({
                  toView: 'list89'
              })
            }else{
                
            }
        }else{
            return false;
        }
  }
})　　

3：看了前兩部沒什么了不起的，但是坑來了，對就是 css 樣式的坑（ 不信的話，將以上 js 中 data heightType值改成 "heightHandred" 試試，你就會恍然大迷瞪!!! ）：

/* pages/homePage/testing/testing.wxss */
page{
    height: 100%;
}
/* 左側 list 列表 */
.heightHandred{
    position: relative;
    height: 100%;
}
.heightAuto{
    position: relative;
    height: auto;
}
view.knowledgeNodes{
    height: 200rpx;
    line-height: 200rpx;
}

/* 右側 list 表頭跳轉頁 */
.list{ position: fixed; z-index: 9; top:30rpx; right: 10rpx; }

.colorBlue{
    color: deepskyblue;
}
.colorGray{
    color: darkslategray;
}

4：css 預留 樣式 “heightAuto” => 為了下一講，綁定滾動條事件 bindscroll 事件 和 錨點跳轉 ~~~ 感覺不錯就點個贊吧