vue项目中swipe自定义pagination，navigationButton，鼠标滑过暂停播放

最近在vue项目中使用了swipe，为了修改样式踩了不少坑记录一下。

先上最终成果图

项目要求自定义分页器，前后按钮，以及鼠标滑过时暂停轮播

下载安装

npm install swiper@5.x vue-awesome-swiper

注意一下这里使用的是swiper5

本地注册

import { Swiper, SwiperSlide,} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  }
}

组件内的代码要分成两部分，轮播图一部分（swiper-wrapper），控制器一部分（swipe-control），划重点！控制按钮放在swiper-wrapper的外面才能控制样式。

swiper-wrapper部分：

<div class="swiper-w" @mouseenter="on_stop" @mouseleave="on_start">
      <swiper ref="myswiper" :options="swiperOptions">
        <swiper-slide v-for="item in bannerList" :key="item.id">
          <div class="swiper-wrap">
            <div class="clip">
              <img :src="item.url" alt="" />
            </div>
            <p class="swiper-title">{{ item.inof }}</p>
          </div>
        </swiper-slide>
      </swiper>
</div>

swipe-control部分（直接接着上面的代码往下放）：

<div class="swiper-c">
      <div class="button-prev" slot="button-prev">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="button-next" slot="button-next">
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="line"></div>
</div>

就这样搭好结构不写任何配置和样式如下：

可以看到当我们把轮播图和控制器分开结构之后，样式也跟着结构一起脱钩了

然后这个布局用flex一把梭就不用我多说了吧

虽然此时控制器的样式已经脱离了swipe的掌控，但是上面的三个小点除外，我们需要在配置中添加他的类名

swiperOptions:{
    pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
    },
}

bulletClass 表示小圆点未选中时

bulletActiveClass 选中时

定义好了类名，还要在css中定义你的样式

.swiper-pagination .my-bullet {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin: 4px;
    background: rgba(255, 255, 255, 0.5);
    display: block;
    transition: width 0.3s;
    cursor: pointer;
  }
  .swiper-pagination .my-bullet-active {
    display: block;
    background: #ffffff;
    width: 20px;
    height: 4px;
    border-radius: 4px;
  }

至于上下翻页按钮也是同样修改配置然后对着类名修改你的样式，和上面基本一样

// 在swiperOptions中
navigation: {
          nextEl: ".button-next",
          prevEl: ".button-prev",
  },

最后说一下鼠标滑过swiper暂停，swiper是没有直接的配置鼠标滑过暂停的，不过他提供了对应的暂停和启动的函数

所以实现滑过暂停的原理就是 监听鼠标事件 => 调用暂停或启动函数

methods: {
    on_stop() {
      this.$refs.myswiper.swiperInstance.autoplay.stop();
    },
    on_start() {
      this.$refs.myswiper.swiperInstance.autoplay.start();
    },
  },