滑动页面修改透明度实现整屏切换，限制请求并发

下载文本并保存为txt到本地

downloadResult() {
    const data = this.logMessage.join('\n') //要打印的数据，这里是把数组转成了字符串
    const name = "下载内容"
    const element = document.createElement('a')
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data))
    element.setAttribute('download', name)
    element.style.display = 'none'
  	document.body.appendChild(element);
    element.click();
    document.body.removeChild(element); //下载完成后清除dom
},

设置请求并发数

async beginRequest() {
  const maxRequestCount = 5; //最多同时有n次请求已发送，限制并发数量
  let currentRequestCount = 0;
  const requestList = [
    	{ url: 'url0'},
      { url: 'url1'},
      { url: 'url2'},
      { url: 'url3'},
      { url: 'url4'},
      { url: 'url5'},
      { url: 'url6'},
      { url: 'url7'},
  ]
  requestList.forEach(async item => {
    try {
      while (currentRequestCount >= maxRequestCount) {
        //当并发请求数达到上限时，等待一段时间再重新判断是否能开始新的请求
        await new Promise((resolve) => setTimeout(resolve, 500));
      }
      currentRequestCount++;
      await sendRequest(item)
      currentRequestCount--;
    } catch (errorMessage) {
      currentRequestCount--;
    }
  })
},
async function sendRequest (item) {
  await axios.post(item.url).then(({data}) => {
    if (data.code == 0) {
      //处理逻辑
    }
  }).catch((err => {
    throw err.message
  }))
}

Service Worker的使用

// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function(registration) {
      console.log('service worker 注册成功')
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(['./index.html', './index.js'])
    })
  )
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    })
  )
})

滑动页面实现翻页+换文字

<div class="picture-sticky-main">
  <h2 class="intro-h2">Slider Area</h2>
  <p class="section-title bg-section-title">fixed title2</p>
  <div class="scroll-container">
    <div class="slider-item-container">
      <section class="left-content-area" ref="leftContentArea" style="visibility: hidden">
        <div :key="sliderIndex">
          <h3>{{sliderArray[sliderIndex].header}}</h3>
          <h4>{{sliderArray[sliderIndex].subtitle}}</h4>
          <p>{{sliderArray[sliderIndex].content}}</p>
        </div>
        <div class="select-line slider-item-animation" :style="{top: sliderIndex * 74 + 'px'}">
          <span class="select-index">0{{sliderIndex + 1}}</span>
        </div>
      </section>
      <section class="left-content-area fixed-left-content-area" :style="{left:fixedPosition.left + 'px', top:fixedPosition.top + 'px'}" style="transform: translateX(0)">
        <div :key="sliderIndex">
          <h3>{{sliderArray[sliderIndex].header}}</h3>
          <h4>{{sliderArray[sliderIndex].subtitle}}</h4>
          <p>{{sliderArray[sliderIndex].content}}</p>
        </div>
        <div class="select-line slider-item-animation" :style="{top: sliderIndex * 74 + 'px'}">
          <span class="select-index">0{{sliderIndex + 1}}</span>
        </div>
      </section>
      <section class="right-image-area">
        <div class="right-image-container" v-for="(item, index) in sliderArray" :key="index">
          <img :src="item.imgUrl" class="slider-area-image"
               draggable="false" :alt="item.header">
        </div>
      </section>
    </div>
  </div>
</div>

.picture-sticky-main{
  background: url("./images/slider_background.webp") no-repeat center;
  background-size: 100% 100vh;
  /*这里是重点 保持背景图片不动*/
  background-attachment: fixed;
}
.picture-slider-area{
  box-sizing: border-box;
  background-size: contain;
  width: 100%;
  .section-title{
    padding-top: 121px;
  }
  .intro-h2{
    color: white;
  }
  .scroll-container{
    width: 100%;
    ::v-deep{
      .__rail-is-vertical{
        display: none !important;
      }
    }
  }
  .slider-item-container{
    padding: 67px 2vw 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: 70px;
    min-height: 618px;
    .left-content-area{
      height: 371px;
      width: 37.2vw;
      max-width: 534px;
      border-left: 0.5px solid rgba(255, 255, 255, 0.5);
      padding-left: 48px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      position: sticky;
      top: 34vh;
      margin-bottom: 20vh;
      animation: opacityChange 1s linear;
      transform: translateX(5%);
      @keyframes opacityChange {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      .select-line{
        position: absolute;
        width: 2px;
        height: 74px;
        background: #FFB6E6;
        left: -1.25px;
      }
      .select-index{
        color: #FFB6E6;
        font-size: 15px;
        line-height: 30px; /* 200% */
        position: absolute;
        left: -36px;
        top: 50%;
        transform: translateY(-50%);
      }
      h3{
        color: white;
        font-size: 30px;
        line-height: 40px; /* 133.333% */
        width: 100%;
      }
      h4{
        color: white;
        font-size: 25px;
        line-height: 32px; /* 160% */
        margin-top: 16px;
        width: 100%;
      }
      p{
        color: white;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; /* 150% */
        width: 103%;
        margin-top: 18px;
      }
    }
    .fixed-left-content-area{
      position: fixed;
    }
    .right-image-area{
      max-width: 630px;
      display: flex;
      flex-direction: column;
      .right-image-container{
        height: 100vh;
        display: flex;
        align-items: center;
        position: relative;
        width: 43.75vw;
        &:first-child{
          align-items: flex-start;
          height: 75vh;
          img{
            max-height: 50vh;
          }
        }
        &:last-child{
          img{
            margin-top: 25vh;
          }
        }
      }
      img{
        display: block;
        max-width: 100%;
        max-height: 56vh;
        animation: fadeinTop;
        position: relative;
        z-index: 1;
      }
    }
  }
}

pageScroll(){
  const currentTop = document.documentElement.scrollTop || document.body.scrollTop;
  const sliderItemArray = [...document.getElementsByClassName('right-image-container')];
  //top超出上面是-，实时改变透明度
  if (currentTop > this.scrollTop) {
    sliderItemArray.forEach((item, index) => {
      if (item.getBoundingClientRect().top < 0) {
        item.style.opacity = 1 - Math.abs(item.getBoundingClientRect().top) / item.getBoundingClientRect().height;
      } else {
        item.style.opacity = 1 - item.getBoundingClientRect().top / item.getBoundingClientRect().height / 2;
      }
      if (item.getBoundingClientRect().top - 0 < item.getBoundingClientRect().height / 2 && item.getBoundingClientRect().top >= 0) {
        this.sliderIndex = index
      }
    })
  } else {
    sliderItemArray.forEach((item, index) => {
      if (item.getBoundingClientRect().bottom > 0) {
        item.style.opacity = 1 - Math.abs(item.getBoundingClientRect().top) / item.getBoundingClientRect().height;
      } else {
        item.style.opacity = 1 - item.getBoundingClientRect().top / item.getBoundingClientRect().height / 2;
      }
      if (Math.abs(item.getBoundingClientRect().bottom - item.getBoundingClientRect().height) < item.getBoundingClientRect().height / 2) {
        this.sliderIndex = index
      }
    })
  }
  //单个div滑动页面时动画抖动 用两个div实现
  let leftContentInfo = this.$refs.leftContentArea.getBoundingClientRect();
  this.fixedPosition.left = leftContentInfo.left;
  this.fixedPosition.top = leftContentInfo.top;
  this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (this.scrollTop > 60) {
    this.isFilterModel = true;
  } else {
    this.isFilterModel = false;
  }
},
//页面滚动时添加这个监听事件！！
window.addEventListener('scroll', this.pageScroll, true);