vue封装swiper代码实例解析
这篇文章主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
data(){
return{
list:[],
swiperOption:"",
xiding:"",
//轮播高度
SwiperHeight:''
}
},
mounted(){
this.onload()
//获取轮播图图片的高度
setTimeout(()=>{
//通过ref获取轮播dom，获取轮播的高度
console.log(this.$refs.mySwiper.$el.offsetHeight)
this.SwiperHeight=this.$refs.mySwiper.$el.offsetHeight
},2000)
//监听滑动事件
window.onscroll=this.handleScroll
},
destroyed(){
window.onscroll=null;//清除滑动事件绑定
},
methods:{
handleScroll(){
//获取屏幕滑动的高度
console.log(document.documentElement.scrollTop)
//滑动高度>轮播dom高度吸顶
if(document.documentElement.scrollTop>this.SwiperHeight){
//吸顶
this.xiding=true
}else{
//取消吸
this.xiding=false
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。