vue滚动事件和swiper左右滑动插件

监听页面滚动事件

    window.addEventListener('scroll', this.handleScroll)
    
    handleScroll:function(){
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

    }, 

获取元素坐标

    getPosition:function (reference, target) {
        //因为我们会将目标元素的边框纳入递归公式中，这里先减去对应的值
        var result = {
            left: -target.clientLeft,
            top: -target.clientTop
        }

        var node = target;
        while(node != reference && node != document){
            result.left = result.left + node.offsetLeft + node.clientLeft;
            result.top = result.top + node.offsetTop + node.clientTop;
            node = node.parentNode;
        }
        result.right = result.left + target.clientWidth
        result.bottom = result.top + target.clientHeight

        return result;
    },

滚动到指定元素的位置
     

document.getElementById("testsc").scrollIntoView();

  
      
vue-awsome-swiper用法
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

XXX.vue-template

          <div @click="gotoDetail">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide><img src="../../static/image/1.png"></swiper-slide>
              <swiper-slide><img src="../../static/image/2.png"></swiper-slide>
              <swiper-slide><img src="../../static/image/3.png"></swiper-slide>
              <div class="swiper-pagination" slot="pagination" @click="gotoDetail"></div>
            </swiper>            
          </div>

XXX.vue-scripte

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
    data(){
        return{
            swiperOption: {
                pagination:{
                  el:'.swiper-pagination',
                  clickable:true,
                }, 
                slidePreView:1, 
                autoplay:{
                  autoplay:false,
                  delay:2000, 
                  disableOnInteraction:false
                }, 
                spaceBetween:30, 
                loop:true,
            }
            
        }
    }
    components: {
        swiper,
        swiperSlide
    },    
    methods:{
        gotoDetail:function(){
            console.log('index : ' + this.$refs.mySwiper.swiper.active % 3)
        }
    }
}    

vue-awsome-swiper是基于swiper完成的封装，operation的编写一样，但是不同版本的结构不一样，如果样式或者设置不生效，要注意了

https://www.swiper.com.cn/api/index2.html

没有详细 研究不同swiper页的点击效果，从浏览器调试可以看出，展示出来的swiper页已经不是当初写出来的swiper了，为了实现左右滑动的效果已经被改写了，所以点击事件无效，为了早点实现效果，所以，外面套一个div，然后用div响应点击事件了，从this.$refs.mySwiper.swiper.active % 3可以判断出点击的是那一页，页数不确定的话要自己取余