VUE2.0 實現移動端在固定區域內的滾動效果

1.開發工具：微信web開發者工具；

2.項目：嵌在APP中的一個活動，活動是H5頁面，使用VUE2.0框架。

3.需求，直接上截圖：

item 上拉滾動到底部，遮罩層部分消失；item下拉，遮罩層部分顯示。

4.代碼：

HTML：

遮罩層部分與滾動區域部分是平級

<template>
  <div id="selectGoods">
    <!--item列表區域-->
    <div class="goods-area" ref="box">
      <div class="goods-list" ref="item" v-for="(item,index) in items" >
        <img class="left-img" :src="item.goodsUrl" alt="">
        <div class="right-text">
          <span class="inviter-goods">{{item.resourceName}}</span> <br>
          <span class="invitee-rules"><span class="person-num">{{item.inviteResourceId}}</span>我是右側文本第二行</span>
        </div>
      </div>
    </div>
    <!--列表底部遮罩層-->
    <div class="bottom-mask" v-show="bottomMaskShow">
      <img class="mask-img" src="../../../static/inviteFriends/goodsListMask.png" alt="">
      <img class="bottom-triangle" src="../../../static/inviteFriends/xiasanjiao.png" alt="">
    </div>
  </div>
</template>

CSS（重點）:

.goods-area{
  height:8.58rem;
  overflow-x: hidden;       /* 解決左右能夠滑動的問題 */
  overflow-y: auto;       /* 解決左右能夠滑動的問題 */
  overflow-scrolling: touch;   /*兼容性 ios5+、android4+ */
}

JS：

this.$refs.是VUE2.0新增的一個對象，不須要使用JS原生的獲取DOM節點的方法，直接在元素上綁定ref,如上，<div  ref = "box">，而後再JS中直接調用 this.$refs.box 就能夠直接獲取。另外，感興趣的小夥伴能夠看一下，console.log(this.$refs.item)的結果。

迴歸本文主題，vue2.0 中的 mounted 方法，是頁面加載後調用方法的地方。這還牽扯到另一個問題就是VUE的鉤子函數（後續工做中有了更深刻的體會結合本身的實際項目再寫一篇）。

頁面加載後，監聽滾動區域的 scroll 事件，調用 onScroll 方法，根據滾動的尺寸判斷是否已經滾動到底部，控制遮罩層的顯示和隱藏。

mounted () {
  this.$refs.box.addEventListener('scroll', this.onScroll);
},
onScroll () {    //onScroll方法放在methods:{}中
  let nScrollHeight = this.$refs.box.scrollHeight;  // 滾動距離總長   內部div的高度
  let nScrollTop = this.$refs.box.scrollTop;  // 滾動條（點）當前的位置在內部div的高度 裏佔多少
  let itemHeight = nScrollHeight / (this.items.length);  // 能夠理解爲每個item的高度
  let scrollLength = itemHeight * (this.items.length - 4);  // 默認顯示4個item
  this.bottomMaskShow = true;
  if (nScrollTop  > (scrollLength -49)) {  // 49  這個差值比較靈活，是根據項目中打印出來的item高度和scrollTop實際滾動（出去）的值對比得出的
    this.bottomMaskShow = false;
  } else
  if(nScrollTop <= (scrollLength -49)){   
    this.bottomMaskShow = true;
  }
}

其實這個功能沒有什麼難點，可是本身在這個問題上糾纏了好長時間，在移動端的效果老是不理想，緣由在於，在一開始本身就進入了一個誤區，認爲在微信的開發工具上打印出來的 scrollTop 跟手機上打印出來的是同樣的，結果是，徹底不同，手機根據尺寸的大小scrollTop的值也是不同的。

寫在最後：

1.對於移動端的適配問題，靈活，以不變應萬變；

2.遇到問題，想一想那些點都是「你覺得的」，可能就是這些「你覺得的」出了問題；

寫在最後的最後：

轉行前端小白的第一篇博客，茫茫‘博’海中的一粟，不求能幫助他人，只爲審查自身，記錄，成長。