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
      }
    },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue框架里使用Swiper的方法示例

    下载swiper 首先使用npm 或者cnpm下载swiper cnpm install swiper 引入swiper import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 使用swiper <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swi

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • vue 中swiper的使用教程

    Install 在vue cli下的使用 npm install vue-awesome-swiper --save 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 在component.vue中 <template> <div id="container"> <

  • 移动端滑动切换组件封装 vue-swiper-router实例详解

    移动端滑动切换组件封装 vue-swiper-router实例详解

    具体代码如下所述: <strong>组件部分</strong> <template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'" v-for='(item, index) in tabLis

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • 使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    旋转叠加 平移 前段时间做Hybrid App,UI设计湿要求某一个页面的展示要实现滑动轮播效果,选中的内容卡片居中显示,上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头,而且要高斯模糊等等..最骚的是滑动特效要是一个个旋转叠加.(摔! 当时用的是vue-cli-3 + ant-design-vue实现的页面,发现ant-design-vue里头有现成的Carousel组件可用,由于排期比较急,先暂时用这个实现了第一版,没有特效没有其他花里胡哨的展示.验收完第一版后,发现ant-de

  • 解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

    前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • vue封装swiper代码实例解析

    这篇文章主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 data(){ return{ list:[], swiperOption:"", xiding : "", // 轮播高度 SwiperHeight:'' } }, mounted(){ this.onload() // 获取轮播图图片的高度 setTimeout(()=> { // 通过ref获取轮播dom

  • vue使用原生swiper代码实例

    这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <template> <div> <div class="swiper_Box" :class="identify"> <div class="swiper-wrapper" :ref="identify"> <d

  • Vue封装Swiper实现图片轮播效果

    Vue封装Swiper实现图片轮播效果

    图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

  • JAVA面向对象 封装原理及实例解析

    JAVA面向对象 封装原理及实例解析

    这篇文章主要介绍了JAVA面向对象 封装原理及实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 抽象 去定义一个类的时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板).这种研究问题的方法称为抽象. 修饰符 Java提供四种访问控制修饰符号控制方法和变量的访问权限: Ⅰ.公开级别:用pubilc修饰,对外公开 Ⅱ.受保护级别:用protected修饰,对子类和同一个包中的类公开 Ⅲ.默认级别:没有修饰符号,向同一

  • RocketMQ重试机制及消息幂代码实例解析

    这篇文章主要介绍了RocketMQ重试机制及消息幂代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.重试机制 1.由于MQ经常处于复杂的分布式系统中,考虑网络波动,服务宕机,程序异常因素,很有可能出现消息发送或者消费失败的问题.因此,消息的重试就是所有MQ中间件必须考虑到的一个关键点.如果没有消息重试,就可能产生消息丢失的问题,可能对系统产生很大的影响.所以,秉承宁可多发消息,也不可丢失消息的原则,大部分MQ都对消息重试提供了很好

  • Python解析json代码实例解析

    这篇文章主要介绍了Python解析json代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 什么是json格式: JSON(JavaScript Object Notation):一种轻量级数据交换格式,相对于XML而言更简单,也易于阅读和编写,机器也方便解析和生成,Json是JavaScript中的一个子集. import json data = { "statusCode": 200, "data":

  • 微信小程序实现一个简单swiper代码实例

    微信小程序实现一个简单swiper代码实例

    这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha

  • Python list运算操作代码实例解析

    这篇文章主要介绍了Python list运算操作代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在操作list的时候,经常用到对列表的操作运算,比如说,列表添加,删除操作,其实,这里面经常回遇到这样一个问题,就是列表的操作容易被混淆了. 有人做了一个总结,这个很清晰,我就不多做阐述了: 1.append() 向列表尾部追加一个新元素,列表只占一个索引位,在原有列表上增加 2.extend() 向列表尾部追加一个列表,将列表中的每个元

  • spring cloud gateway网关路由分配代码实例解析

    这篇文章主要介绍了spring cloud gateway网关路由分配代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1, 基于父工程,新建一个模块 2,pom文件添加依赖 <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-

  • Spring Bean装载方式代码实例解析

    Spring Bean装载方式代码实例解析

    这篇文章主要介绍了Spring Bean装载方式代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Bean的装配方式 Bean的装配可以理解为依赖关系注入 基于XML的装配 a) 设值注入 i.要求: Bean 类必须提供一个默认的无参构造方法. Bean 类必须为需要注入的属性提供对应的setter方法. b) 构造注入 package com.itheima.assemble; import java.util.List; pub

随机推荐