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.遇到问题，想想那些点都是“你以为的”，可能就是这些“你以为的”出了问题；

写在最后的最后：

转行前端小白的第一篇博客，茫茫‘博’海中的一粟，不求能帮助他人，只为审查自身，记录，成长。

VUE2.0 实现移动端在固定区域内的滚动效果

猜你喜欢