先放效果圖

效果圖

代碼截圖

wxml

js

js

代碼解釋

主體html其實東西很少，主要分為兩部分：一個主體的view和一個長內(nèi)容的scroll-view；

當前項的內(nèi)容都放置在scroll-view內(nèi)，只有在scroll-view滾動到底部時，才會觸發(fā)外層的上拉滾動；

監(jiān)聽touch start和touch end也只是為了區(qū)別用戶是否上拉足夠的距離，如果距離不夠的話同樣也不會觸發(fā)滾動；

scroll-view內(nèi)scroll-into-view的作用是，當用戶上拉切換項的時候，把當前的視角定位在scroll-view的頂部；單純的用戶體驗方面的設(shè)計；

我是通過wx.pageScrollTo()這個方法來進行頁面滾動的，如果你有其他的好方法也歡迎交流；

實際上我這里是兩次滾動，第一次滾動一屏的距離，完成后再滾動回一屏的距離；

此時頁面的滾動條其實還在頂部，滾動距離為0；因為第二次滾動沒有動畫，給用戶一種向下滾動了一屏的感覺；

原理解析

我們的數(shù)據(jù)始終是一個長度為2的數(shù)組scroll_list；

這里的view和scroll-view我們叫做外、內(nèi)兩部分；

外的主要作用是監(jiān)聽用戶上拉距離，內(nèi)用來控制當前可滾動的是內(nèi)還是外；

當內(nèi)滾動到底時，lower === true，用戶再次上拉時，開始計算用戶上拉距離；

scrollToLower() {  
  this.lower = true;
},
touchstart(e) {  
  if (!this.lower) {    
    this.start = undefined;   
    return;  
  }  
  this.start = e.touches[0].clientY; // 用戶點擊位置的y坐標
}

如果上拉距離大于200，調(diào)用wx.pageScrollTo()，滾動一屏；如果距離大于0但小于200，把用戶上拉的距離滾動回去；如果小于0，則用戶滾動為內(nèi)，將監(jiān)聽用戶的上拉取消；

touchend(e) {    
  if (!this.start) return;    
  const move = this.start - e.changedTouches[0].clientY; // 計算上拉距離    
  const { view } = this; // 屏幕高度    
  const _this = this;    
  if (move > 200) {      
    wx.pageScrollTo({        
      scrollTop: view,        
      selector: '.main',        
      complete() {          
        wx.pageScrollTo({            
          scrollTop: 0,            
          selector: '.main',            
          duration: 0,            
          complete() {              
            const { scroll_list } = _this.data; // 初始為scroll_list: [1, 2]              
            scroll_list.shift();              
            scroll_list.push(_this.index); // 第一次滾動后scroll_list: [2, 3]              
            _this.setData({                
              item_id: 'img', // 將內(nèi)的滾動位置設(shè)置為內(nèi)的頂部                
              scroll_list              
            })              
            ++_this.index;              
            _this.lower = false; // 初始化滾動監(jiān)聽枷鎖              
            _this.start = undefined; // 初始化點擊起點位置            
          }          
        })        
      }     
    })    
  } else if (0 < move <= 200) {      
    wx.pageScrollTo({        
      scrollTop: 0,        
      selector: '.main',        
      complete() {          
        _this.start = undefined;        
      }      
    })    
  } else {      
    this.lower = false;    
  }  
}