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-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
• 移动端滑动切换组件封装 vue-swiper-router实例详解
• 解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
• 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
• Vue框架里使用Swiper的方法示例
• vue中引用swiper轮播插件的教程详解
• vue 中swiper的使用教程
• 解决vue中使用swiper插件问题及swiper在vue中的用法