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中的eval函数
Nov 02 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
javascript实现类似超链接的效果
2014/12/26 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
ES6中Array.includes()函数的用法
2017/09/20 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
对Python中plt的画图函数详解
2018/11/07 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
Python面试题集
2012/03/08 面试题
会计专业自我鉴定
2014/02/10 职场文书
班级年度安全计划书
2014/05/01 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS