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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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
Terran兵种对照表
2020/03/14 星际争霸
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
JS控制表格隔行变色
2006/06/26 Javascript
javascript 一些用法小结
2009/09/11 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Django配置跨域并开发测试接口
2020/11/04 Python
html5与css3小应用
2013/04/03 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
颁奖晚会主持词
2014/03/25 职场文书
运动会入场口号
2014/06/07 职场文书
中学生自我评价2015
2015/03/03 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL