vue使用swiper

1 篇文章 0 订阅
1 篇文章 0 订阅

文章引用vue使用swiper

这次记录主要是记录swiper6的使用,网上多是以前的版本,但是好像vue3可以直接使用swiper6,
不需要这个大佬的awesome插件了,所以就有了很多问题。
其中的重点是组件使用的是大佬的组件,原因就是swiper/vue下找不到这些组件,然后参数类也是用的options来传参,但是事件都是直接绑定到swiper上。通过ref来访问实例。

  1. 局部使用:
<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptions" @swiper="onSwiper" @click="gg" 
          @slideChange="onSlideChange">
            <swiper-slide>1</swiper-slide>
            <swiper-slide>2</swiper-slide>
            <swiper-slide>3</swiper-slide>
        </swiper>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>
<script>
    // Import Swiper Vue.js components
    import 'swiper/swiper-bundle.min.css' 导入样式
    import {
        Swiper,
        SwiperSlide,
    } from 'vue-awesome-swiper';  使用大佬包装的组件
    import SwiperCore, {  使用swiper6的模组扩展
        Autoplay,
        Navigation
    } from 'swiper';
    // Import Swiper styles
    SwiperCore.use([Navigation, Autoplay]); 注册模块

    export default {
        data() {
            return {
                swiperOptions: {
                    slidesPerView: 3,
                    grabCursor:true,
                    spaceBetween: 50,
                    centeredSlides: true,
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                }
            }
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        methods: {
            onSwiper(swiper) {
                console.log(swiper)
            },
            onSlideChange() {
                console.log('slide change');
            },
            gg(){
                console.log('click');
            }
        },
        mounted() {
            this.swiper.slideTo(3, 1000, false)
        }
    };
</script>
  1. 全局使用
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import VueAwesomeSwiper from 'vue-awesome-swiper' 导入两个组件
    // import style (>= Swiper 6.x)
    import 'swiper/swiper-bundle.min.css' 使用样式
    import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';导入模组
    SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);使用模组
    Vue.use(VueAwesomeSwiper, /* { default options with global component } */)全局注册插件
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    我是用的是局部,全局没有测试。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值