vue-awesome-swiper 双向控制

github: https://github.com/surmon-china/vue-awesome-swiper

安装： npm install [email protected] --save  加上一个版本号, 稳定.

通过swiper的回调函数和swiper提供的方法来实现互相控制的功能

主要代码：通过一个 swiper 的onTransitionStart回调函数，再通过 app0.swiperobj1.slideTo(i, 100, false) 来实现另外一个swiper的转动。

<template>
    <div class="test-container">
        <div class="swiper1">
            <swiper :options="swiper1.swiperOption" :not-next-tick="swiper1.notNextTick" ref="mySwiper1">
                <!-- slides -->
                <swiper-slide v-for="(item, index) of data1">
                    <span :class="[item.flag == 'h' ? 'zred' : '']" @click="tonews(item.id)">{{item.name}}</span>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination1" slot="pagination"></div>
                <div class="swiper-button-prev1" slot="button-prev"></div>
                <div class="swiper-button-next1" slot="button-next"></div>
                <div class="swiper-scrollbar1" slot="scrollbar"></div>
            </swiper>
        </div>
        <div class="swiper1 swiper2">
            <swiper :options="swiper2.swiperOption" :not-next-tick="swiper2.notNextTick" ref="mySwiper2">
                <!-- slides -->
                <swiper-slide v-for="(item, index) of data1">{{item.data}}</swiper-slide>

                <!-- Optional controls -->
                <div class="swiper-pagination2" slot="pagination"></div>
                <div class="swiper-button-prev2" slot="button-prev"></div>
                <div class="swiper-button-next2" slot="button-next"></div>
                <div class="swiper-scrollbar2" slot="scrollbar"></div>
            </swiper>
        </div>

    </div>
</template>

<script>
let app0 = null;
export default {
    name: "TestContent",
    data() {
        return {
            data1: [
                {
                    id: 1,
                    name: '11',
                    flag: 'h',
                    data: '1111'
                },
                {
                    id: 2,
                    name: '22',
                    flag: '',
                    data: '2222'
                },
                {
                    id: 3,
                    name: '33',
                    flag: '',
                    data: '3333'
                },
                {
                    id: 4,
                    name: '44',
                    flag: '',
                    data: '4444'
                },
                {
                    id: 5,
                    name: '55',
                    flag: '',
                    data: '5555'
                },
                {
                    id: 6,
                    name: '66',
                    flag: '',
                    data: '6666'
                },
                {
                    id: 7,
                    name: '77',
                    flag: '',
                    data: '7777'
                }

            ],
            swiper1: {
                notNextTick: true,
                swiperOption: {
                    // swiper options 所有的配置同swiper官方api配置
                    autoplay: false,
                    loop: false,
                    slidesPerView: 4,
                    freeMode: true,
                    grabCursor: true,
                    setWrapperSize: true,
                    // autoHeight: true,
                    mousewheelControl: true,
                    observeParents: true,
                    // if you need use plugins in the swiper, you can config in here like this
                    // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
                    debugger: true,
                    onTransitionStart(swiper) {
                        console.log(111);
                        console.log(swiper)
                        console.log(222);
                    }
                },
            },
            swiper2: {
                notNextTick: true,
                swiperOption: {
                    // swiper options 所有的配置同swiper官方api配置
                    autoplay: false,
                    loop: false,
                    slidesPerView: 1,
                    grabCursor: true,
                    setWrapperSize: true,
                    // autoHeight: true,
                    mousewheelControl: true,
                    observeParents: true,
                    // if you need use plugins in the swiper, you can config in here like this
                    // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
                    debugger: true,
                    onTransitionStart(swiper) {
                        // app0.swiperobj2.slideTo(swiper.activeIndex, 100, false)\

                        // app0.swiperobj2.activeIndex 为当前数组的项
                        for (let i = 0; i < app0.data1.length; i++) {
                            if (app0.swiperobj2.activeIndex == i) {
                                app0.data1[i]['flag'] = 'h'
                                //根据上面的点击,下面滑动
                                app0.swiperobj1.slideTo(i, 100, false)
                            } else {
                                app0.data1[i]['flag'] = ''
                            }
                        }

                        console.log(app0.swiperobj2.activeIndex);
                    }
                }
            },
            newindex: 0
        }
    },
    created() {
        app0 = this;
    },
    computed: {
        swiperobj1() {
            return this.$refs.mySwiper1.swiper
        },
        swiperobj2() {
            return this.$refs.mySwiper2.swiper
        }
    },
    methods: {
        tonews: function (id) {
            for (let i = 0; i < this.data1.length; i++) {
                if (id == this.data1[i].id) {
                    this.data1[i]['flag'] = 'h'
                    //根据上面的点击,下面滑动
                    this.swiperobj2.slideTo(i, 100, false)
                } else {
                    this.data1[i]['flag'] = ''
                }
            }

        }
    },
    mounted() {
        // you can use current swiper instance object to do something(swiper methods)
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        // console.log('this is current swiper instance object', this.swiperobj1)

        // this.swiperobj1.slideTo(3, 1000, false)
        // this.swiperobj2.slideTo(this.newindex, 1000, false)
    }
};
</script>

<style lang="stylus" scoped>
.test-contaienr
    padding: 0.2rem
    overflow: hidden
.swiper1
    height: 1rem
.swiper2
    margin-top: 3rem
>>>.swiper-container
    background: orange
>>>.swiper-slide
    height: 2rem
    font-size: 1rem
    text-align: center
</style>