vue使用swiper一般有2种方法！

第一种

我绝对不是很好使，随便讲讲，建议采用第二种！

一种直接当js引入使用，一种则是采用组件方式！

采用组件方法

    "swiper": "^6.3.5",
    "vue-awesome-swiper": "^3.1.3",

主要是上面2个组件

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper)

然后直接

 <swiper
      ref="mybanner"
      class="mybanner"
      :options="swiperOptions"
    >
      <swiper-slide
        v-for="(item,index) in bannerList"
        :key="index"
        class="banner-slide" />
        
        </swiper>
        
 computed: {
    ...mapGetters(['device']),
    swiper() {
      return this.$refs.mybanner.swiper
    },
  },
  
  请求接口后
      setTimeout(() => {
          this.$refs.myadvbanner.swiper.init()
        }, 100)
     //调用init方法即可

就不细讲了！

主要是讲述第二种！

1、下载组件

cnpm i swiper@6.3.5

2、引入

import Swiper, { Navigation, Pagination } from "swiper"
Swiper.use([Navigation, Pagination]); // 关键点在这里，单纯的swiper里面是没有包含上下按钮和分页的！

3、html

        <div class="swiper swiper-bn">
            <div class="swiper-wrapper">
                <div class="swiper-slide banner-slide" v-for="(item, index) in bannerList" :key="index">
                    <div class="slide-inner"
                        style="background-image:url('https://img.alicdn.com/imgextra/i2/O1CN01A6isBN1hyVzQ8Y08e_!!6000000004346-0-tps-2880-1070.jpg')">
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next"></div>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-bn-pag"></div>
        </div>

4、调用方法

  mounted() {

        this.getBannerList()
    },
    methods: {
        getBannerList() {
            // channel: 'dfffggg'
            bannerList({ page: 0, size: 0, }).then((res) => {
                this.bannerList = res.dataList
                setTimeout(() => {
                    this.myswiper()
                }, 100)
            })
        },
        myswiper: function () {
            var swiper = new Swiper('.swiper-bn', {
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                observer: true,
                observeParents: true,

            });
            console.log(swiper)
        }
    },

然后即可！

3、双向绑定怎么使用

需要引入

import Swiper, { Navigation, Pagination, Thumbs } from "swiper"
Swiper.use([Navigation, Pagination, Thumbs]);

其他按照swiper 官网的 thumbs 方法使用即可！