Swiper、vue-awesome-swiper中文文档

中文文档 找了好久才找到，适用于vue-awesome-swiper滑动组件

swiperOption: {
          height: 380,
          speed: 500,//切换速度
          watchOverflow: true, //当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航等。默认不开启这个功能。
          loop: true,//开启循环模式
          slidesPerView: 1,
          spaceBetween: 30,
          preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件。
          simulateTouch: false,//鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
          pagination: {
            el: '.swiper-pagination',
          },
          on: {
            touchEnd: function (event) {
              //你的事件
            },
          }
        }

在data中定义swiperOption对象，使用v-bind绑定到

<template>
  <!--在此处添加渲染的内容-->
  <div class="swiper-box">
    <swiper :options="swiperOption" class="swiper">
      <!-- slides -->
      <swiper-slide class="swiper-slide" v-for="(item,index,key) in result" :key="key">
        <div class="item-img">
          <img :src="item.imgUrl" alt="" width="100%" height="100%">
          <div class="item-title">{
   
   {item.title}}</div>
          <div class="b"></div>
        </div>
        <div class="item-text">
          <p>{
   
   {item.text}}</p>
          <button class="item-btn" @click="clickItem($event,index)">查看更多</button>
        </div>
      </swiper-slide>

    </swiper>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>

.swiper-box {
    width: 80%;
    height: 35rem;
    margin: 2rem auto;
    position: relative;
  }

  .swiper-box .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-box .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }

  .swiper .swiper-slide {
    background-color: #ffffff;
    box-shadow: 0.02rem 0.1rem 1.78rem 0.02rem rgba(0, 0, 0, 0.09);
  }

  .item-img {
    width: 100%;
    height: 17.5rem;
    position: relative;
  }

  .item-title {
    position: absolute;
    right: 2rem;
    bottom: 0.5rem;
    font-size: 1.7rem;
    color: #d3a359;
  }

  .b {
    background-color: #d3a359;
    width: 2rem;
    height: 0.2rem;
    position: absolute;
    right: 2rem;
    bottom: 0;
  }

  .item-text {
    width: 100%;
    height: 17.5rem;
    position: relative;
  }

  .item-text p {
    width: 80%;
    height: 15.5rem;
    margin: 0 auto;
    padding: 2rem 0 0;
    line-height: 2rem;
  }

  .item-btn {
    width: 7.5rem;
    height: 2.5rem;
    border-radius: 0.3rem;
    border: solid 0.1rem #d3a359;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4rem;
    margin: auto;
    font-size: 1.2rem;
    color: #d3a359;
  }