视差滚动

基础用法

下面是视差滚动的基础用法。

<template>
  <div class="t-parallax-scrolling-area">
    <as-animation-parallax-scrolling :imgs="imgs" @scroll="scrollParallaxScrolling">
    </as-animation-parallax-scrolling>
  </div>
</template>
<script>
export default {
  name: "t-parallax-scrolling",
  data(){
    return{
      imgs:[
        "https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg",
        "https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg",
        "https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg"
      ]
    }
  },
  methods:{
    scrollParallaxScrolling(scrollTop,containerHeight){
      let index=Math.ceil(scrollTop/containerHeight)+1;
      if (scrollTop%containerHeight<containerHeight/2){
        index--;
      }
      console.log(`第${index}张图片占据主要位置`)
    } 
  }
}
</script>

<style>
.t-parallax-scrolling-area{
  width: 100%;
  height: 340px;
}
@media screen and (max-width: 480px) {
  .t-parallax-scrolling-area{
    height: 180px;
  }
}
</style>

Expand Copy Copy

Attributes

参数	说明	必填
imgs	图片路径数组,类型为Array,默认为[]	否
font-size	字体大小,单位px,类型为Number,默认为80	否
show-number	是否显示图片编号,类型为Boolean,默认为true	否

Events

事件名称	说明	回调参数
scroll	图片滚动	共两个参数，依次为：滚动距离(scrollTop)、容器高度(containerHeight)。