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

}

},

以上是 vue封装swiper代码实例解析 的全部内容, 来源链接: utcz.com/z/349440.html

回到顶部