swiper轮播图

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

前言

swiper轮播图的插件非常的好用，但是因为版本的不同，引入css总是报错，所以这块需要特别注意一下，安装好引入后，就可以轻松上手啦

一、实现效果

二、使用步骤

1.安装插件

npm install swiper@5 [email protected] --save

2.引入插件

import { swiper, swiperSlide } from 'vue-awesome-swiper';

// eslint-disable-next-line import/no-unresolved

import 'swiper/css/swiper.css';

// 不同的版本引入css方式不一样，如果你用的其他版本可以百度一下具体的引用方式

components: { swiper, swiperSlide },

3.具体使用

<div v-if="imgList.length" class="img-swiper">
    <swiper ref="imgSwiper" :options="imgSwiperOption">
      <swiper-slide v-for="(item, index) in imgList" :key="index">
        <img :src="item.picture" />
      </swiper-slide>
      <!-- 需要分页 -->
      <div slot="pagination" class="swiper-pagination"></div>
    </swiper>
 </div>

imgList: [],
imgSwiperOption: {
    loop: true, // 循环播放
    loopAdditionalSlides: 3,
    autoplay: 3000,
    speed: 1000,
    pagination: '.swiper-pagination'
},

.img-swiper {
  height: 120px;
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
  }
  .swiper-pagination {
    bottom: 0 !important;
    .swiper-pagination-bullet {
      width: 5px;
      height: 5px;
      background: #f7f8f9;
    }
    .swiper-pagination-bullet-active {
      width: 10px;
      height: 5px;
      background: #fff;
      border-radius: 20px;
    }
  }
}

三、超出一定数量才分页

很多时候swiper不单单只是用来一张一张的图片轮播，有时候一页有好几个模块，这时候就需要自己处理一下分页

一页展示8个应用

<div v-if="appList.length" :class="style.appBox">
    <div v-if="appList.length > 8" class="app-swiper">
      <swiper ref="appSwiper" :options="appSwiperOption">
        <swiper-slide v-for="i in swiperItemCount" :key="i">
          <div :class="style.appList">
            <div
              v-for="(item, index) in appList.slice(
                (i - 1) * 8,
                i * 8
              )"
              :key="i + '-' + index"
              :class="style.appItem"
            >
              <img :src="item.iconUrl" />
              <span>{{ item.name }}</span>
            </div>
          </div>
        </swiper-slide>
        <div slot="pagination" class="app-swiper-pagination"></div>
      </swiper>
    </div>
    <div v-else :class="style.appList">
      <div
        v-for="(item, index) in appList"
        :key="index"
        :class="style.appItem"
      >
        <img :src="item.iconUrl" />
        <span>{{ item.name }}</span>
      </div>
    </div>
</div>

appList: [],
swiperItemCount: 1, // 分页数量
appSwiperOption: {
    loop: true,
    loopAdditionalSlides: 3,
    autoplay: false,
    speed: 1000,
    pagination: '.app-swiper-pagination'
},

// 自定义分页展示
getApplicationList() {
  this.$api['具体后端接口']()
    .then(res => {
      if (res.code === this.$constant.apiServeCode.SUCCESS_CODE) {
        this.appList = res.data || [];
        this.swiperItemCount = Math.ceil(this.appList.length / 8); // 每8个小模块一页
      }
      return true;
    })
    .catch(err => {
      console.log(err);
    });
},

总结

以上就是今天要讲的内容，针对于swiper插件的使用，希望对你有所帮助。