VUE2.0 realizes the scrolling effect of the mobile terminal in a fixed area

1. Development tools: WeChat web developer tools;

2. Project: An activity embedded in the APP, the activity is an H5 page, using the VUE2.0 framework.

3. Demand, directly on the screenshot:

The item is pulled up and scrolled to the bottom, and the mask layer part disappears; the item is pulled down, and the mask layer part is displayed.

4. Code:

HTML：

The mask layer part is level with the scroll area part

<template>
  <div id="selectGoods">
    <!--item list area-->
    <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>I am the second line of text on the right</span>
        </div>
      </div>
    </div>
    <!--Mask at the bottom of the list-->
    <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 (emphasis):

.goods-area{
  height:8.58rem;
  overflow-x: hidden; /* Solve the problem of sliding left and right */
  overflow-y: auto; /* Solve the problem of sliding left and right */
  overflow-scrolling: touch; /* Compatibility ios5+, android4+ */
}

JS：

this.$refs. is a new object in VUE2.0. You don't need to use JS's native method to get DOM nodes. You can directly bind ref to the element, as above, <div ref = "box">, and then in JS You can get it directly by calling this.$refs.box directly. In addition, interested friends can take a look at the results of console.log(this.$refs.item).

Returning to the theme of this article, the mounted method in vue2.0 is where the method is called after the page is loaded. This also involves another problem that is the hook function of VUE (in the follow-up work, I have a more in-depth experience and write another article based on my actual project).

After the page is loaded, monitor the scroll event of the scroll area, call the onScroll method, and judge whether it has scrolled to the bottom according to the scroll size, and control the display and hide of the mask layer.

mounted () {
  this.$refs.box.addEventListener('scroll', this.onScroll);
},
onScroll () { //The onScroll method is placed in methods:{}
  let nScrollHeight = this.$refs.box.scrollHeight; // The height of the inner div of the scroll distance
  let nScrollTop = this.$refs.box.scrollTop; // How much the current position of the scroll bar (point) occupies in the height of the inner div
  let itemHeight = nScrollHeight / (this.items.length); // Can be understood as the height of each item
  let scrollLength = itemHeight * (this.items.length - 4); // 4 items are displayed by default
  this.bottomMaskShow = true;
  if (nScrollTop > (scrollLength -49)) { // 49 This difference is more flexible, which is based on the comparison of the item height printed in the project and the actual scroll (out) value of scrollTop
    this.bottomMaskShow = false;
  } else
  if(nScrollTop <= (scrollLength -49)){   
    this.bottomMaskShow = true;
  }
}

In fact, this function is not difficult, but I have been entangled in this problem for a long time, and the effect on the mobile terminal is always unsatisfactory. The reason is that I entered a misunderstanding at the beginning, thinking that I would print it out on the WeChat development tool. The scrollTop is the same as the one printed on the mobile phone. The result is that it is completely different. The value of the scrollTop of the mobile phone is also different according to the size.

Write at the end:

1. For the adaptation of the mobile terminal, be flexible and adapt to changes;

2. When encountering problems, think about those points that are "what you think", maybe it is these "what you think" that have a problem;

Write at the very end:

The first blog of Xiaobai, who switched to the front end, is a drop in the vast sea of ​​'bo'. He does not seek to help others, but only to review himself, record and grow.