Vue.js 2的最小刷卡器组件 - vue-light-swiper

Vue.js 2的最小刷卡器组件 - vue-light-swiper
插件名称 vue-light-swiper
发布时间 2020年11月24日
插件作者 zhengjiaqi

适用于Vue.js 2+应用程序的简单,轻便的水平/垂直滑动组件。

安装和下载:

# NPM
$ npm install vue-light-swiper --save

用法:

new Vue({
    el: '#app',
    components: {
        vueSwiper: VueSwiper.vueSwiper,
        vueSwiperSlide: VueSwiper.vueSwiperSlide
    },
    data: {
        showIndex1: 0,
        showIndex2: 0,
        bannerList: [
            {
                src: "1.jpeg",
                url: "#"
            },
            {
                src: "2.jpeg",
                url: "#"
            },
            {
                src: "3.jpeg",
                url: "#"
            },
            {
                src: "4.jpeg",
                url: "#"
            }
        ]
    },
    methods: {
        slideChange(index, oldIndex){
            console.log('slideChange:', index, '  oldIndex:' ,oldIndex);
        },
        appendSlide: function (slideText) {
            this.bannerList.push({
                src: 'more.jpeg',
                url: "#"
            });
        },
        prevSlide1: function () {
            this.showIndex1 = this.showIndex1 - 1;
        },
        nextSlide1: function () {
            this.showIndex1 = this.showIndex1 + 1;
        },
        prevSlide2: function () {
            this.showIndex2 = this.showIndex2 - 1;
            console.log('prevSlide',this.showIndex);
        },
        nextSlide2: function () {
            this.showIndex2 = this.showIndex2 + 1;
        }
    }
});