vue swipe自定义组件实现轮播效果

本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下

<template>

 <layout-div :style="getStyle" class="over-h posi-r">
 <layout-div :style="getChildStyle" class="flex" @load="loadHandle">
  <slot/>
 </layout-div>
 <layout-div class="flex-center flex posi-a b0 l0 r0" :height="40" :unit="unit" v-if="!$slots.point">
  <layout-div class="flex">
  <layout-div v-for="i in this.length" :key="i" class="op-5" :mar="[0,15]" :height="20" :width="20"
    :bg="Math.abs(index) == i-1?'red':'#fff'" :fillet="20" :unit="unit"/>
  </layout-div>
 </layout-div>
 <slot v-else name="point"/>
 </layout-div>

</template>
<script>
 export default {
 props: {
  value: {
  type: Number,
  default: 0
  },
  width: { //宽
  type: Number,
  default: null
  },
  height: { //高
  type: Number,
  default: null,
  },
  unit: { //单位
  type: String,
  default: 'px'
  },
  time: { //时间(毫秒)
  type: Number,
  default: 3000
  },
  direction: { //方向 X | Y (注意是:大写)
  type: String,
  default: "X"
  },
  duration: { //每次切换的时间(毫秒)
  type: Number,
  default: 300
  },
  autoPlay: { //是否自动轮播
  type: Boolean,
  default: true
  }
 },
 data() {
  return {
  style: {},
  multiple: 50, //倍数处理,更加UI进行 100倍是按照 750*1334 的UI
  dom: null,  //当前swipe元素
  length: 0, //子元素的数量
  countWidth: 0, //总长度
  index: 0,
  isTouch: false,// 手指是否在屏幕上
  }
 },
 methods: {
  loadHandle(e) {
  this.dom = e.dom
  this.length = e.dom.childElementCount
  for (let i = 0; i < this.length; i++) {
   this.dom.children[i].style.height = this.height ? this.height / this.multiple + this.unit : ''
   this.dom.children[i].style.width = parseFloat(this.dom.style.width) / this.length / this.multiple + this.unit
   this.dom.children[i].style.flexGrow = 1;
  }
  this.bingTouch(this.dom)
  // 判断可不可以自动轮播
  if (this.autoPlay && this.length) this.beginSwipe()
  },
  bingTouch(dom) {
  const self = this;
  let tranX = 0
  this.touch({
   stop: false,
   dom,
   start(e) {
   dom.style.transitionDuration = '0ms'
   tranX = parseFloat(dom.style.transform.split("(")[1]) || 0
   },
   move({dx}) {
   dom.style.transform = `translateX(${dx + tranX + self.unit})`;
   },
   change({direction}) {
   switch (direction) {
    case 'left':
    self.index--;
    break;
   }
   self.moveHandle()
   }
  })
  },
  moveHandle() {  //移动
  const Y = parseFloat(this.dom.style.width) / this.length
  this.dom.style.transitionDuration = `${this.duration}ms`
  this.dom.style.transform = `translateX(${this.index * Y + this.unit})`;
  setTimeout(() => {
   if (!this.isTouch) {
   if (Math.abs(this.index) == this.length - 1) {
    // console.log("要开始调换位置了");
    const first = this.dom.firstChild;
    first.style.transform = `translateX(${(Math.abs(-this.index) + 1) * Y + this.unit})`;
   } else if (Math.abs(this.index) == this.length) {
    // console.log("开始下一轮了")
    const first = this.dom.firstChild;
    this.dom.style.transitionDuration = '0ms'
    this.dom.style.transform = `translateX(${0 + this.unit})`;
    this.index = 0;
    first.style.transform = `translateX(${0 + this.unit})`;
   }
   }
   this.$emit('input', Math.abs(this.index))
  }, this.duration)
  },
  beginSwipe() {
  setTimeout(() => {
   if (this.isTouch) return this.beginSwipe(); //如果是手指在移动,就不再执行
   this.index--
   this.moveHandle()
   this.beginSwipe()
  }, this.time > this.duration ? this.time : this.duration + 1000)
  }
 },
 computed: {
  getStyle() {
  if (this.unit != 'rem') this.multiple = 1;
  const width = this.width ? this.width / this.multiple + this.unit : '100%',
   height = this.height ? this.height / this.multiple + this.unit : ''
  return {width, height};
  },
  getChildStyle() {
  if (this.unit != 'rem') this.multiple = 1;
  this.countWidth = ((this.width || this.dom ? this.dom.parentNode.clientWidth : window.screen.width) / this.multiple * this.length)
  this.style.width = this.countWidth + this.unit
  if (this.height) {
   this.style.height = this.height / this.multiple + this.unit
  } else {
   this.style.height = ''
  }
  return this.style;
  }
 }
 }

</script>

class - style 具体内容如下

css 参考的 UI设计尺寸为 750*1334

.over-h {
 overflow: hidden;
}
.posi-r {
 position: relative;
 z-index: 0;
}
.flex {
 display: flex;
}
.flex-center {
 justify-content: center;
 align-items: center;
}
.posi-a {
 position: absolute;
 z-index: 0;
}
.b0 {
 bottom: 0;
}

.l0 {
 left: 0;
}
.r0 {
 right: 0;
}
.op-5 {
 opacity: 0.5
}
.font-68 {
 font-size: 0.68rem;
}
.col-f {
 color: #fff;
}

示例代码

 <layout-swipe :height="240" :time="2000" unit="rem">
  <layout-div bg="red" class="flex-center flex font-68 col-f">1</layout-div>
  <layout-div bg="yellow" class="flex-center flex font-68 col-f">2</layout-div>
  <layout-div bg="green" class="flex-center flex font-68 col-f">3</layout-div>
 </layout-swipe>

效果图

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

(0)

相关推荐

  • vue2.0使用swiper组件实现轮播效果

    轻松实现vue2.0轮播效果,供大家参考,具体内容如下 1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swi

  • vue轮播图插件vue-awesome-swiper的使用代码实例

    最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom

  • swiper在vue项目中loop循环轮播失效的解决方法

    长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • vue2.0使用swiper组件实现轮播的示例代码

    1.安装swiper npm install swiper@3.4.1 --save-dev 2.引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3.html页面代码 <div class="swiper-container" id="swiper"> <div class="swiper-wrapper"> <di

  • vue轮播图插件vue-awesome-swiper

    Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var

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

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

  • 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实现图片轮播效果

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

  • 基于vue实现swipe轮播组件实例代码

    项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此

随机推荐