vue vue-awesome-swiper 使用方法

下载

npm install vue-awesome-swiper@3 --save-dev

 JS文件

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default{
  components: {
    swiper,
    swiperSlide,
  },
data() {
    return {
      swiperOption: {
        loop: false,
        // 显示分页
        pagination: {
          // el: ".swiper-pagination",
          // clickable: true //允许分页点击跳转
        },
      },
    },
computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },

}
</script>

HTML文件

<swiper
            :options="swiperOption"
            ref="mySwiper"
            @touchMove="onTouchMoves"
            @touchStart="onTouchStarts"
            @touchEnd="onTouchEnds(item)"
          >
            <swiper-slide v-for="(ite,ind) in item.imgList" :key="ind">
              <div class="center">
                <van-image  fit="cover" :src="ite" />
              </div>
            </swiper-slide>
          </swiper>