zoukankan      html  css  js  c++  java
  • vue中引入swiper vue-awesome-swiper插件

    安装指定版本

    npm install vue-awesome-swiper@3.1.3 --save
    

    组件中使用
    这里我贴出在页面中使用方法,小伙伴们可以完全复制粘贴,复杂的东西我都简化掉了。 版本: vue@2.6.11,vue-awesome-swiper@3.1.3

    <template>
        <div class="hello">
            <div class="recommendPage">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide>I'm Slide 1</swiper-slide>
                    <swiper-slide>I'm Slide 2</swiper-slide>
                    <swiper-slide>I'm Slide 3</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>
        </div>
    </template>
    
    <script>
    import { swiper, swiperSlide } from "vue-awesome-swiper"
    import "swiper/dist/css/swiper.css"
    
    export default {
        name: "HelloWorld",
        data() {
            return {
                swiperOption: {
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
                    // 显示分页
                    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
            }
        },
        mounted() {
            // current swiper instance
            // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            console.log("this is current swiper instance object", this.swiper)
            // this.swiper.slideTo(3, 1000, false);
        }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>
    
    

    参考地址:https://blog.csdn.net/u012570307/article/details/107203851/

    砥砺前行
  • 相关阅读:
    DevExpress-xaml常用控件
    循环中Random()产生相同随机数问题的对策
    插入U盘提示程序
    钛度TSG309鼠,血手幽灵P93 彩漫鼠,微星GM41Lightweight鼠标参数对比
    MarkdownPad
    C# 通过路径取文件方法
    初识张首晟教授有感
    【机器学习123】模型评估与选择 (上)
    【机器学习123】绪论
    【深度学习123】开篇
  • 原文地址:https://www.cnblogs.com/lhongsen/p/14897888.html
Copyright © 2011-2022 走看看