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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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