移动端swiper的简单使用

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情”

一、 首先需要在你项目里面的package.json的这个文件下的Dependencies注册"vue-awesome-swiper": “^3.1.3”,具体安装代码如下:

npm install swiper vue-awesome-swiper --save

PS: 如果由于版本不同导致报错,可以尝试直接把"vue-awesome-swiper": “^3.1.3”复制粘贴到Dependencies里面,然后重新npm install,这样会根据package.json里面的模块来进行安装

二、注册好之后,我们在需要使用到swiper的地方按需引入即可,具体例子如下:

import { swiper, swiperSlide } from 'vue-awesome-swiper'
@Component({
  components: {
    swiper,
    swiperSlide,
  },
})

三、引入之后你就可以开始使用啦,具体的使用方式如下:

<swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in bannerList"
                      :key="index">
          <img :src="item"
               class="banner-img"
               alt="" />
        </swiper-slide>
        <div slot="pagination"
             class="swiper-pagination"></div>
      </swiper>

接下来我们来从上到下逐一解释里面参数的含义:

1、option就是轮播图的相关配置,具体例子如下:

swiperOption: any = {
    effect: 'coverflow', // 3d滑动
    slidesPerView: 1,
    centeredSlides: true,
    coverflowEffect: {
      rotate: 0,
      stretch: 40,
      depth: 50,
      modifier: 2,
      slideShadows: false
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
  }

PS:具体options里面的这些参数都是什么含义,可以移步官网,根据你的需要来进行配置,在这里就不做过多阐述了,官网还有很多效果图,体验也更好些~ [ 点击查看swiper官网 ]

2、bannerList就是我通过v-for遍历循环的图片,这个参数是可变的,自己命名的,叫什么都可以。图片地址由于我是举例嘛,就用了本地地址,需要用require来处理一下,具体例子如下:

bannerList: any = [
    require('../../assets/introduce/bg.png'),
    require('../../assets/introduce/bg.png'),
  ]

3、pagination,这个参数就是分页器,这个就按需处理啦,如果你们UI设计里面没有分页那就直接去掉即可,有的话就加上,样式不同,直接在style里覆盖样式即可

四、最后给大家看下效果图,是一个带有分页器并且右侧漏出来一丢丢的轮播图,具体展示如下:

PS:以上就是swiper的简单使用,我的举例只是最简单的一个demo,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。

最后,祝大家发大财~