nuxt+vue 官网页面向下滑动时显示div并增加动画效果

页面代码

1、当前是页面信息，数组循环生成布局、在此基础上增加页面下滑时逐步增加元素动画效果

    <div class="contact-banner">
      <div class="banner-box">
        <h4 class="banner-title">Globalized Services Bring</h4>
        <h4 class="banner-title">The World Closer Together</h4>
        <p class="banner-text" style="margin-top:1.85rem">In E-energy ,Our global supply chain</p>
        <p class="banner-text"> is dedicated to serving our customers and helping them achieve.</p>
      </div>
    </div>
    <div class="container">
      <div class="contact-us-box" ref="contactRef" v-for="(item, index) in contactList" :key="index">
        <img :src="$store.state.imgHeader + item.companyAddressDtoList[0].imgUrl" :alt="item.name">
        <div :class="['text-box',index % 2 == 0 ? 'contac-post1' : 'contac-post2']" v-show="item.aloneShow">
          <h4 class="contact-title">{{item.name}}</h4>
          <p class="contact-info">Tel: {{item.companyAddressDtoList[0].phone}}</p>
          <p class="contact-info">E-mail: {{item.companyAddressDtoList[0].email}}</p>
          <p class="info-box-content">{{item.companyAddressDtoList[0].addressDesc}}</p>
        </div>
      </div>
    </div>
  </div>

脚本信息

1、在mounted方法监听窗口滑动时间

window.addEventListener("scroll", this.handleScroll);

2、更改数组添加aloneShow属性控制对应布局页面显示，由于是数组变化更新页面需要forceUpdate强更新

handleScroll() {
      const clientHeight = document.body.clientHeight;
      this.contactList.forEach((v, i) => {
        if (clientHeight - this.$refs.contactRef[i].getBoundingClientRect().top > 400) {
          v.aloneShow = true;
        }
        if (document.documentElement.scrollTop < 120) {
          v.aloneShow = false
        }
      });
      this.$由于是数组需要forceUpdate强更新();
    }