zoukankan      html  css  js  c++  java
  • vue-awesome-swiper的使用

    这是swiper专门为了vue开发出的插件,参数基本一样

    https://www.swiper.com.cn/

    vue中使用

    npm install vue-awesome-swiper

    组件中引入

      import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
      import 'swiper/css/swiper.css'
                <swiper
                  ref="carouselSwiper"
                  :options="carouselSwiperOptions"
                  v-if="carouselList.length"
                >
                  <swiper-slide
                    v-for="(item, index) in carouselList"
                    :key="index"
                  >
                    <img class="carouselImg" :src="item.picPath" alt="carousel图片">
                    <div class="swiper-slide-title">{{item.title}}</div>
                    <div class="swiper-title-bgc"></div>
                  </swiper-slide>
                  <div class="swiper-pagination"  slot="pagination"></div>
                  <div class="swiper-button-prev" slot="button-prev"></div>
                  <div class="swiper-button-next" slot="button-next"></div>
                </swiper>

    说明:

    carouselSwiperOptions是配置文件
    v-if="carouselList.length" 添加这行是为了参数有值以后,才调用swiper,不然会有其他问题(比如展示的不是第一条数据)
      // eslint-disable-next-line no-unused-vars
      let Vm = null
    定义在最外面
    // 轮播图swiper配置
            carouselSwiperOptions: {
              slidesPerView: 1,
              spaceBetween: 30,
              loop: true,
              initialSlide: 0,
              // 自动播放
              autoplay: {
                delay: 6000,
                stopOnLastSlide: false,
                disableOnInteraction: false
              },
              // 滑动速度
              speed: 1500,
              // horizontal
              direction: 'horizontal',
              observer: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              },
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
              },
              on: {
                click: function () {
                  // 上一页、下一页点击和点击图片都会触发click方法,
                  // 不过上一页、下一页点击时,clickedIndex为undefined
                  if (this.clickedIndex === undefined) {
                    return
                  }
                  //  realIndex当前点击的图在列表的index值
                  const realIndex = this.realIndex
                  // 要在最外层定义Vm,直接使用this访问不到vue实例
                  Vm.swiperClick2(realIndex)
                }
              }
            },
     
  • 相关阅读:
    Django
    C++开源库集合
    单细胞参考文献 single cell
    第三章 RNA测序
    第二章 基因芯片
    前言 转录组
    生物信息学——RNA的剪切过程
    生信研究内容
    测序总结,高通量测序名词
    单端测序,双端测序,基因组计划图谱
  • 原文地址:https://www.cnblogs.com/zhaobao1830/p/13329072.html
Copyright © 2011-2022 走看看