轮播图|vue 使用 swiper 的坑和方法步骤

原创已于 2022-04-14 16:17:09 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-14 10:35:35 首次发布

本文档展示了如何在Vue项目中安装和使用vue-awesome-swiper组件来创建轮播图。通过npm安装指定版本的vue-awesome-swiper和swiper依赖，然后在组件中局部引入并配置样式及选项，实现了一个包含多个卡片信息的轮播效果。每个卡片包含统计数据和详细信息，并提供了分页和导航箭头功能。

安装依赖

安装vue-awesome-swipe：

npm i vue-awesome-swiper@3.1.3 -S

安装swiper依赖

 npm install swiper

注意：ue-awesome-swipe要注意安装的版本，3版本的比较不踩雷

局部引入组件（因为只有一个页面使用到了这个）

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';

使用组件

HTML的代码

<div class="recommendPage">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="item in slideOptions" :key="item.name">
                    <a-card
                      class="cardClass"
                      hoverable
                      style="height: 260px"
                      @click="toDetail()"
                    >
                    <a-row>
                      <a-col :span="6">
                        <a-icon type="mail" theme="twoTone" :style="{fontSize:'60px'}"/>
                      </a-col>
                      <a-col :span="18">
                        <span :style="{fontWeight:'bold',fontSize:'16px'}">{{item.name}}</span>
                        <a-row :style="{marginTop:'20px'}">
                          <a-col :span="12">
                          <a-statistic
                          :value-style="{ color: 'rgb(82, 192, 254)' }"
                          title="接入总条数" :value="item.value" />
                          </a-col>
                          <a-col :span="12">
                            <a-statistic
                            title="最新日期接入总条数"
                            :value-style="{ color: 'rgb(82, 192, 254)' }"
                            :precision="2" :value="112893"/>
                          </a-col>
                        </a-row>
                        <a-row>
                          <a-col :span="12">
                          <a-statistic
                          title="最早数据日期"
                          :value-style="{ color: 'rgb(82, 192, 254)' }"
                          :value="112893" />
                          </a-col>
                          <a-col :span="12">
                            <a-statistic
                          :value-style="{ color: 'rgb(82, 192, 254)' }"
                          title="最新数据日期"
                          :precision="2" :value="112893"/>
                          </a-col>
                        </a-row>
                      </a-col>
                    </a-row>
                    <template :style="{height:'30px'}" #actions>
                      <a-row>
                        <a-col :span="12"><span>奇安信</span></a-col>
                        <a-col :span="12"><span>份数据</span></a-col>
                      </a-row>
                    </template>
                    </a-card>
              </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>
          </div>

配置需要的option项（写在了data中）

这个根据自己需要的内容去写，可以参考官网给出的例子和api去配置参数

swiperOption: {
        // loop: true, // 循环往复的方式
        // 展示三个
        slidesPerView: 3,
        slidesPerGroup: 3,
        // slidesOffsetBefore: 0,
        loopFillGroupWithBlank: true,
        // 宽度
        width: 1450,
        spaceBetween: 50,

        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: false,
        // },
        // 显示分页
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true,
        // },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },

配置style的参数（根据需要去设置）

.cardClass{
  box-shadow: 0 0 20px #eee;
}
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 200px;
  background: #fff;
}
.recommendPage{
  width: '100%';
}
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  background: #fff;
  color: #000;
  font-size: 16px;
  text-align: center;
}

最终效果：