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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue中英文切换实例代码
Jan 21 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
react+antd 递归实现树状目录操作
Nov 02 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操作MongoDB类实例
2015/06/17 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
js的Prototype属性解释及常用方法
2014/05/08 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
深入浅析Vue中的Prop
2018/06/10 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
python处理二进制数据的方法
2015/06/03 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python使用正则筛选信用卡
2019/01/27 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
大学军训感言600字
2014/02/25 职场文书
党员创先争优承诺书
2014/03/26 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
客户付款通知书
2015/04/23 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
JS实现数组去重的11种方法总结
2022/04/04 Javascript