移動端常見 局部滾動佈局 （微信小程序 + vue H5）

在項目中經常會遇到這種類似的佈局方式，全屏滾動有時候不符合項目場景需求，經常會遇到頭部底部固定，中間區域滾動，還有會觸底加載，在小程序中我們會有類似的觸底事，下面我項目中遇到的問題總結，

1.先來說說常見的佈局方式，主要flex佈局，類似下面

這種就是頭尾固定，中間區域高度固定超出滾動，無論是小程序還是H5 都可以這種佈局，具體css代碼：

父元素
.peas-wrapper {
   width: 100%;
   **height: 100vh;** 
   **display: flex;**
   **flex-direction: column;**
   padding: 40px 20px 0;
   box-sizing:border-box;
}

父元素flex佈局，高度100%，頁面從上到下正常鋪，但是關鍵的一點，中間區域 css設置 flex = 1， overflow: scroll; 就行了。
下面說說關於觸底加載
微信小程序有觸底的事件：

	onReachBottom: function () {
		let that = this
		if ( that.data.hasMoreData) {
			that.setData({ CurPage:that.data.CurPage + 1 })
			that.changeList()
		} else {
      if(that.data.flagpush) {
		that.setData({flagpush:false})
        wx.showToast({
					title:'沒有更多數據',
					icon:'none',
					duration:1000  
				})
			}
		}
  }, 

但是像我們上面說的，上中下結構的，一般中間區域觸底加載怎麼做呢。在vue 中H5 頁面，我們需要監聽計算觸底事件

  <div class="peasList_box"  @scroll='handleScroll'>  //滾動區域外層加handleScroll事件
           <!--中間是你滾動區域的代碼  -->
  </div> 

js

    //  滾動監聽
    handleScroll(){
        this.$nextTick(() => {
            let el = document.querySelector('.peasList_box');  //滾動區域外層的類名
            let offsetHeight = el.offsetHeight;//可視區域高度
            el.onscroll = () => {
                let scrollTop = el.scrollTop; // 爲滾動條在Y軸上的滾動距離。（滾動條距離頂部距離）
                let scrollHeight = el.scrollHeight; //內容可視區域的高度加上溢出（滾動）的距離    （內容總長度）。
                // console.log(scrollTop,scrollHeight)
                if ((offsetHeight + scrollTop) - scrollHeight >= -50) {
                this.loadmore();
                // 需要執行的代碼
                }
            };
        });
    },
    loadmore() {
      ......
    },

這樣觸底就可以加載了，注意：在ios上這種滾動會很不流暢，那麼在全局加

* {
  -webkit-overflow-scrolling: touch; 
}

這樣就行了