vue封装swiper代码实例解析


Posted in Javascript onOctober 08, 2019

这篇文章主要介绍了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
      }
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 #Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 #Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 #Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 #Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 #Javascript
新手入门js闭包学习过程解析
Oct 08 #Javascript
You might like
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php-fpm配置详解
2014/02/12 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
php unlink()函数使用教程
2018/07/12 PHP
event.srcElement+表格应用
2006/08/29 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python IDLE添加行号显示教程
2020/04/25 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
会议活动邀请函
2014/01/27 职场文书
勤俭节约倡议书
2014/04/14 职场文书
贷款担保申请书
2014/05/20 职场文书
小学生运动会报道稿
2014/09/12 职场文书
先进个人评语大全
2015/01/04 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python