vue中利用Hooper插件实现轮播图（跑马灯）效果，可按钮切换轮播、滑动切换轮播、无线循环轮播、自定义每个视图显示的项目数等，本例视图项目数为3

YiuChauvin
196 阅读4分钟

vue中利用Hooper插件实现轮播图（跑马灯）效果，可按钮切换轮播、滑动切换轮播、无线循环轮播、自定义每个视图显示的项目数等，本例视图项目数为3，效果图和具体操作步骤如下：

1.png

2.png

第一步：安装Hooper插件

npm i hooper
or 
yarn add hooper

第二步：在.vue文件中的script部分引入插件和相关样式

import {
  Hooper,
  Slide,
  Navigation as HooperNavigation,
  // Pagination as HooperPagination,
  //  Progress as HooperProgress
} from "hooper";
import "hooper/dist/hooper.css";

第三步：在.vue文件中的script部分，找到export default ，在里面的components中注册组件

  components: {
    Hooper,
    Slide,
    HooperNavigation,
    // 自带的左右切换按钮
    // HooperPagination,
    // 指示器
    // HooperProgress
  },
   data () {
    return {
      isRun:true,
      // settings:{
      //   itemsToShow:3 ,
      //   infiniteScroll:true,
      //   autoPlay:false,
      //   playSpeed:2000,
      //   hoverPause:true,
      //   progress:true
      // }
    }
  },

第四步：在.vue文件中的 <template></template>中使用轮播组件

<template>
  <div style="width: 836px; height: 150px; position: relative;margin-top: 76px;left: 50%;transform: translateX(-50%);border-radius: 10px; padding: 0 10px;">
    <!-- 自定义左右切换按钮 -->
  <button @click.prevent="slidePrev" class="btnBox"><svg class="icon-arrowLeft" viewBox="0 0 24 24" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"></path><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg></button>
  <button @click.prevent="slideNext" class="btnBox"><svg class="icon-arrowRight" viewBox="0 0 24 24" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"></path><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg></button>
    <!-- 
      :itemsToShow:3 每个视图显示的项目数为3
      :infiniteScroll:true 启动无限滚动模式
      :autoPlay:false 默认为false, 启动自动播放，这个属性可以被动态改变(自定义左右切换按钮的时)
      :playSpeed:2000 切换项目的速度，单位为ms
      :hoverPause:true 当鼠标进入时暂停滑动
      :settings:{} 上面的都可以定义在data中的对象中，在赋值给settings
      :progress:true 显示指示器
     -->
  <hooper ref="carousel" 
      :itemsToShow="3"
      :infiniteScroll="true"
      :autoPlay="isRun"
      :playSpeed="1500"
      >
    <slide>
     <div style="height: 142px;width: 100%;background-color: red;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: blue;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: pink;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: black;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: greenyellow;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: orange;"></div>
    </slide>
  </hooper>
  <!-- 自带的左右切换按钮 -->
  <!-- <hooper-navigation slot="hooper-addons"></hooper-navigation> -->
  <!-- 指示器  -->
  <!-- <hooper-pagination slot="hooper-addons"></hooper-pagination> -->
  </div>
</template>

第五步：在methods中定义切换按钮前进后退（切换上一张、切换下一张）效果

 methods: {
    // 前进
    slidePrev() {
      this.isRun = false
      this.$refs.carousel.slidePrev();
      this.debounce(function(){
        this.isRun = true
      },1500)
    },
    // 后退
    slideNext() {
      this.isRun = false
      this.$refs.carousel.slideNext();
      this.debounce(function(){
        this.isRun = true
      },1500)
    },
    // 防抖 当点击切换按钮后停止操作时间间隔 1.5s 后将继续恢复自动轮播
    debounce(fn,delay){
        let timer = null
        return function(){
          if(timer!==null){
            clearTimeout(timer)
          }
          timer=setTimeout(()=>{
            fn.call(this)
          },delay)
        }
    },
  }

第六步：在style中写相应的样式

<style scoped lang="less">
.btnBox{
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #2679ff;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 38%;
  cursor: pointer;
  > .icon-arrowLeft,
  > .icon-arrowRight {
    transform: scale(1.5);
    color: #2679ff;
    path:last-child {
      fill: #2679ff;
    }
  }
}
.btnBox:nth-child(1){
  left: -4%;
}
.btnBox:nth-child(2){
  right: -4%;
}
</style>

Hooper插件相关参数props：

PropDefaultDescription
itemsToShow1每个视图显示的项目数 (可以是一部分)
itemsToSlide1使用导航按钮时的项目数
initialSlide0初始化时显示项目的索引号
infiniteScrollfalse启动无限滚动模式
centerModefalse启动中心模式
verticalfalse启动垂直滚动模式
rtlnull启动rtl模式
mouseDragtrue切换鼠标拖拽
touchDragtrue切换触摸拖拽
wheelControltrue启动鼠标滚轮切换
keysControltrue切换键盘控制
shortDragtrue启动任何移动都切换项目
autoPlayfalse启动自动播放，这个属性可以被动态改变。
playSpeed2000切换项目的速度，单位为ms
transition300项目变换的时间，单位为ms
sync''同步两个轮播的滚动
hoverPausetrue当鼠标进入时暂停滑动
trimWhiteSpacefalse限制只有在没有完全空的滑动空间时才能滑动
settings{ }定义所有设置的对象

完整代码：

<template>
  <div style="width: 836px; height: 150px; position: relative;margin-top: 76px;left: 50%;transform: translateX(-50%);border-radius: 10px; padding: 0 10px;">
    <!-- 自定义左右切换按钮 -->
  <button @click.prevent="slidePrev" class="btnBox"><svg class="icon-arrowLeft" viewBox="0 0 24 24" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"></path><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg></button>
  <button @click.prevent="slideNext" class="btnBox"><svg class="icon-arrowRight" viewBox="0 0 24 24" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"></path><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg></button>
    <!-- 
      :itemsToShow:3 每个视图显示的项目数为3
      :infiniteScroll:true 启动无限滚动模式
      :autoPlay:false 默认为false, 启动自动播放，这个属性可以被动态改变(自定义左右切换按钮的时)
      :playSpeed:2000 切换项目的速度，单位为ms
      :hoverPause:true 当鼠标进入时暂停滑动
      :settings:{} 上面的都可以定义在data中的对象中，在赋值给settings
      :progress:true 显示指示器
     -->
  <hooper ref="carousel" 
      :itemsToShow="3"
      :infiniteScroll="true"
      :autoPlay="isRun"
      :playSpeed="1500"
      >
    <slide>
     <div style="height: 142px;width: 100%;background-color: red;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: blue;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: pink;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: black;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: greenyellow;"></div>
    </slide>
    <slide>
      <div style="height: 142px;width: 100%;background-color: orange;"></div>
    </slide>
  </hooper>
  <!-- 自带的左右切换按钮 -->
  <!-- <hooper-navigation slot="hooper-addons"></hooper-navigation> -->
  <!-- 指示器  -->
  <!-- <hooper-pagination slot="hooper-addons"></hooper-pagination> -->
  </div>
</template>

<script>
import {
  Hooper,
  Slide,
  Navigation as HooperNavigation,
  // Pagination as HooperPagination,
  //  Progress as HooperProgress
} from "hooper";
import "hooper/dist/hooper.css";
export default {
  name: "App",
  components: {
    Hooper,
    Slide,
    HooperNavigation,
    // 自带的左右切换按钮
    // HooperPagination,
    // 指示器
    // HooperProgress
  },
  data () {
    return {
      isRun:true,
      // settings:{
      //   itemsToShow:3 ,
      //   infiniteScroll:true,
      //   autoPlay:false,
      //   playSpeed:2000,
      //   hoverPause:true,
      //   progress:true
      // }
    }
  },
  methods: {
    // 前进
    slidePrev() {
      this.isRun = false
      this.$refs.carousel.slidePrev();
      this.debounce(function(){
        this.isRun = true
      },1500)
    },
    // 后退
    slideNext() {
      this.isRun = false
      this.$refs.carousel.slideNext();
      this.debounce(function(){
        this.isRun = true
      },1500)
    },
    // 防抖 当点击切换按钮后停止操作时间间隔 1.5s 后将继续进行自动轮播
    debounce(fn,delay){
        let timer =null
        return function(){
          if(timer!==null){
            clearTimeout(timer)
          }
          timer=setTimeout(()=>{
            fn.call(this)
            if(timer) clearTimeout(timer)
          },delay)
        }
    },
  }
};
</script>

<style scoped lang="less">
.btnBox{
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #2679ff;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 38%;
  cursor: pointer;
  > .icon-arrowLeft,
  > .icon-arrowRight {
    transform: scale(1.5);
    color: #2679ff;
    path:last-child {
      fill: #2679ff;
    }
  }
}
.btnBox:nth-child(1){
  left: -4%;
}
.btnBox:nth-child(2){
  right: -4%;
}
</style>
avatar
文章
阅读
粉丝