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
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
热门推荐
7 简短的二胎祝福语
10 简短霸气女儿生日 祝福语
11 祝福语高考小众诗句简短
12 元旦祝福语20秒简短
13 老师过年祝福语大全 简短
14 一生祝福语简短
15 产检祝福语简短霸气
16 朋友店开张祝福语简短
17 生日爱情祝福语大全简短
18 朋友女儿生日祝福语 简短