swiper商品缩略图和大图点击时联动

<div class="imgshow" > 

                    <swiper  :options="swiperOption" ref="swiperTop" class="swiper-no-swiping" >

                        <!-- <div class="swiper-wrapper"> -->

                            <swiper-slide class="swiper-slide" v-for="(item,index) in imgList" :key="index">

                                    <!-- <img :src="item.url" style="width:435px;" /> -->

                                    <div style="width:435px;height:268px;">{{item.name}}</div>

                                    <!-- <div class="floatdiv">

                                        <img :src="tu720" />

                                        <div class="fontcolor">720°实景看地</div>

                                    </div> -->

                            </swiper-slide>

                            

                        <!-- </div> -->

 

                        

                    </swiper>

                </div>

                <div class="left_bottom">

                    <swiper  :options="thumbsSwiper" ref="swiperThumbs">

                        <!-- <div class="swiper-wrapper"> -->

                            <swiper-slide  v-for="(item,index) in imgList" :key="index">

                                <!-- <img :src="item.url" style="width:137px;"  /> -->

                                <div style="height:100px;width:137px;background:pink">{{item.name}}</div>

                            </swiper-slide>

                            <div class="swiper-pagination swiper-pagination-white"></div>

                            <div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="prev"></div>

                            <div class="swiper-button-next swiper-button-white" slot="button-next" @click="next"></div>

                        <!-- </div> -->

                    </swiper>

                </div>

            </div>

 

在data中进行定义

thumbsSwiper:{

                spaceBetween: 10,

                slidesPerView: 3,

                freeMode: true,

                watchSlidesVisibility: true,

                watchSlidesProgress: true,

                navigation: {

                    nextEl: '.swiper-button-next',//下一页dom节点

                    prevEl: '.swiper-button-prev'//前一页dom节点

                },

                on:{

                    click:()=>{

                        let swiperTop = this.$refs.swiperTop.$swiper

                        let swiperThumbs = this.$refs.swiperThumbs.$swiper

                        //swiperTop.activeIndex = swiperThumbs.clickedIndex

                        let activeIndex=swiperThumbs.clickedIndex;

                        swiperTop.slideTo(activeIndex,1000,false);

 

                    }

                }

            },

             swiperOption: {

                spaceBetween: 10,

                thumbs: {

                    swiper: this.thumbsSwiper

                }

             },

 

向前向后按钮事件

prev() {

            this.$refs.swiperThumbs.$swiper.slidePrev()

            let swiperTop = this.$refs.swiperTop.$swiper

                        let swiperThumbs = this.$refs.swiperThumbs.$swiper

                        //swiperTop.activeIndex = swiperThumbs.clickedIndex

                        let activeIndex=swiperThumbs.activeIndex;

                        swiperTop.slideTo(activeIndex,1000,false);

        },

        next() {

            this.$refs.swiperThumbs.$swiper.slideNext();

            let swiperTop = this.$refs.swiperTop.$swiper

                        let swiperThumbs = this.$refs.swiperThumbs.$swiper

                        console.log(swiperThumbs);

                        //swiperTop.activeIndex = swiperThumbs.clickedIndex

                        let activeIndex=swiperThumbs.activeIndex;

                        swiperTop.slideTo(activeIndex,1000,false);

        },

 

整体页面

<template>

    <div class="con" id="con">

        <div class="one">

            <div class="one_left">

                <div class="one_route">当前位置：</div>

                <el-breadcrumb separator-class="el-icon-arrow-right" class="one_route">

                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

                    <el-breadcrumb-item :to="{name:'trade-assignment'}">协议交易</el-breadcrumb-item>

                    <el-breadcrumb-item>详情</el-breadcrumb-item>

                </el-breadcrumb>

            </div>

        </div>

        <div class="two">

            <div class="two_left">

                <div class="class720">720°实景看地</div>

                <div class="imgshow" > 

                    <swiper  :options="swiperOption" ref="swiperTop" class="swiper-no-swiping" >

                        <!-- <div class="swiper-wrapper"> -->

                            <swiper-slide class="swiper-slide" v-for="(item,index) in imgList" :key="index">

                                    <!-- <img :src="item.url" style="width:435px;" /> -->

                                    <div style="width:435px;height:268px;">{{item.name}}</div>

                                    <!-- <div class="floatdiv">

                                        <img :src="tu720" />

                                        <div class="fontcolor">720°实景看地</div>

                                    </div> -->

                            </swiper-slide>

                            

                        <!-- </div> -->

 

                        

                    </swiper>

                </div>

                <div class="left_bottom">

                    <swiper  :options="thumbsSwiper" ref="swiperThumbs">

                        <!-- <div class="swiper-wrapper"> -->

                            <swiper-slide  v-for="(item,index) in imgList" :key="index">

                                <!-- <img :src="item.url" style="width:137px;"  /> -->

                                <div style="height:100px;width:137px;background:pink">{{item.name}}</div>

                            </swiper-slide>

                            <div class="swiper-pagination swiper-pagination-white"></div>

                            <div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="prev"></div>

                            <div class="swiper-button-next swiper-button-white" slot="button-next" @click="next"></div>

                        <!-- </div> -->

                    </swiper>

                </div>

            </div>

            <div class="two_right">

                <div class="two_top">

                    <div>合同编号：1954858086</div>

                    <div><span style="color:#FE7232">44</span>次浏览</div>

                </div>

                <div class="two_two">

                    <div class="two_two_status">交易中</div>

                    <div class="two_two_title">吉林市开发区工业用地出租</div>

                    <div class="pricediv">

                        <div class="two_two_line">|</div>

                        <div class="two_two_price">合同价格：</div>

                        <div class="two_two_money"><span style="font-size:24px;">¥9909.02</span><span style="font-size:14px;margin-left:10px;">万元</span></div>

                    </div>

                </div>

                <div class="list-right-list-data-two">

                    <div class="list-title-last-img">

                        <img src="../../../static/image/index/g4.png" />

                        <div class="list-title-three-font">吉林省&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;吉林市&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;开发区</div>

                    </div>

                    <!-- <div class="list-title-last-img">

                        <img src="../../../static/image/index/g3.png" />

                        <div class="list-title-three-font">发布时间：2021-07-21  19:21:22</div>

                    </div> -->

                </div>

                <div class="three">

                    <div class="three_block" style="border-right:1px solid #E6E6E6">

                        <div>协议交易</div>

                        <div class="price">交易方式</div>

                    </div>

                    <div class="three_block" style="border-right:1px solid #E6E6E6">

                        <div>出租</div>

                        <div class="price">流转类型</div>

                    </div>

                    <div class="three_block">

                        <div>商服用地/批发零售用地</div>

                        <div class="price">土地用途</div>

                    </div>

                </div>

                <div class="three">

                    <div class="three_block" style="border-right:1px solid #E6E6E6">

                        <div>192048.04平方米</div>

                        <div class="price">出租面积</div>

                    </div>

                    <div class="three_block" style="border-right:1px solid #E6E6E6">

                        <div>28个月</div>

                        <div class="price">出租年限</div>

                    </div>

                    <div class="three_block">

                        <div>2020年12月1日</div>

                        <div class="price">成交时间</div>

                    </div>

                </div>

                <div class="five_left">

                    <div class="list-title-last-img">

                        <img src="../../../static/image/supplyinformation/person.png" />

                        <div class="five_font">转让方：</div>

                        <div class="five_font">吉林市****有限公司</div>

                    </div>

                    <div class="list-title-last-img" style="margin-left:30px;">

                        <img src="../../../static/image/supplyinformation/phone.png" />

                        <div class="five_font">受让方：</div>

                        <div class="five_font">吉林市****有限公司</div>

                    </div>

                    <div class="five_font" style="margin-left:40px;">登录后查看具体信息</div>

                    <div class="list-title-last-img" style="margin-left:10px;">

                        <img src="../../../static/image/supplyinformation/right.png" />

                        <div class="five_font_login">立即登录</div>

                    </div>

                </div>

            </div>

        </div>

        <div class="landinformation" id="landinformation_id">

            <div class="infomation_title">

                <div class="infomation_title_color"></div>

                <div class="infomation_title_font">地块信息</div>

            </div>

            <div class="information_table">

                <div class="information_table_row">

                    <div class="information_table_label">权证号</div>

                    <div class="information_table_content">吉（2004）第K0114号</div>

                    <div class="information_table_label">土地性质</div>

                    <div class="information_table_content">国有建设用地使用权</div>

                </div>

                <div class="information_table_row">

                    <div class="information_table_label">土地类型</div>

                    <div class="information_table_content">企业用地</div>

                    <div class="information_table_label">所属行政区</div>

                    <div class="information_table_content">吉林省/吉林市/开发区</div>

                </div>

                <div class="information_table_row">

                    <div class="information_table_label">土地用途</div>

                    <div class="information_table_content">商服用地/批发零售用地</div>

                    <div class="information_table_label">转让面积</div>

                    <div class="information_table_content">112396.21平方米</div>

                </div>

                <div class="information_table_row">

                    <div class="information_table_label">转让建筑面积</div>

                    <div class="information_table_content">112396.21平方米</div>

                    <div class="information_table_label">使用权截止日期</div>

                    <div class="information_table_content">2065-1-12</div>

                </div>

                <div class="information_table_row">

                    <div class="information_table_label">剩余使用年限</div>

                    <div class="information_table_content">44年</div>

                    <div class="information_table_label">土地坐落</div>

                    <div class="information_table_content">吉林市开发区人民路</div>

                </div>

                <div class="information_table_row">

                    <div class="information_table_label">是否连同地上建筑物、其他附着物</div>

                    <div class="information_table_content">有</div>

                    <div class="information_table_label">建筑结构</div>

                    <div class="information_table_content">钢混</div>

                </div>

                <div class="information_table_row">

                    <div class="information_table_label">建筑限高</div>

                    <div class="information_table_content">80米</div>

                    <div class="information_table_label">容积率</div>

                    <div class="information_table_content">-</div>

                </div>

            </div>

        </div>

        <div class="landinformation" id="video_pic">

            <div class="infomation_title">

                <div class="infomation_title_color"></div>

                <div class="infomation_title_font">地块照片视频</div>

            </div>

            <div>

                <div class="video">视频</div>

                <div class="video_show">

                    <img src="../../../static/image/supplyinformation/1.png" />

                    <img src="../../../static/image/supplyinformation/1.png" />

                    <img src="../../../static/image/supplyinformation/1.png" />

                </div>

                <div class="video">图片</div>

                <div class="video_show">

                    <!-- <img src="../../../static/image/supplyinformation/1.png" @click="clickImg($event)" /> -->

                    <el-image   :src="ditu" :preview-src-list="srcList"></el-image>

                    <img src="../../../static/image/supplyinformation/1.png"   />

                    <img src="../../../static/image/supplyinformation/1.png" />

                </div>

            </div>

        </div>

        <div class="last" id="mapposition">

            <div class="infomation_title">

                <div class="infomation_title_color"></div>

                <div class="infomation_title_font">地图位置</div>

            </div>

            <div id="container" style="margin-top:20px;height:460px;">

 

            </div>

        </div>

        <div class="scrollposition">

            <div class="scrollshow" @click="scrollPosition(0)">

                <div>地块</div>

                <div>信息</div>

            </div>

            <div class="scrollshow" @click="scrollPosition(1)">

                <div>图片</div>

                <div>视频</div>

            </div>

            <div class="scrollshow" @click="scrollPosition(2)">

                <div>地图</div>

                <div>位置</div>

            </div>

            <div class="scrollshow" @click="scrollPosition(3)">

                <div>返回</div>

                <div>顶部</div>

            </div>

        </div>

        

    </div>

</template>

 

<script>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

import BigImg from '../../common/BigImg.vue';

export default {

    data(){

        return{

            tu720:require('../../../static/image/trade/golad.png'),

            ditu:require('../../../static/image/supplyinformation/1.png'),

            price:'',

            form:{

                name:'',

                phone:'',

                date:''

            },

            dialogFormVisible: false,

            formLabelWidth: '60px',

            thumbsSwiper:{

                spaceBetween: 10,

                slidesPerView: 3,

                freeMode: true,

                watchSlidesVisibility: true,

                watchSlidesProgress: true,

                navigation: {

                    nextEl: '.swiper-button-next',//下一页dom节点

                    prevEl: '.swiper-button-prev'//前一页dom节点

                },

                on:{

                    click:()=>{

                        let swiperTop = this.$refs.swiperTop.$swiper

                        let swiperThumbs = this.$refs.swiperThumbs.$swiper

                        //swiperTop.activeIndex = swiperThumbs.clickedIndex

                        let activeIndex=swiperThumbs.clickedIndex;

                        swiperTop.slideTo(activeIndex,1000,false);

 

                    }

                }

            },

             swiperOption: {

                spaceBetween: 10,

                thumbs: {

                    swiper: this.thumbsSwiper

                }

             },

             srcList:[

                 require('../../../static/image/supplyinformation/1.png')

             ],

             imgList:[

                 {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'aaa'

                },

                {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'bbb'

                },

                {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'ccc'

                },

                {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'ddd'

                },

                {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'eee'

                },

                {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'fff'

                },

                {

                     url:require('../../../static/image/supplyinformation/1.png'),

                     name:'ggg'

                },

             ],

             showImg:false,

             imgSrc:''

        }

    },

    components: {

      Swiper,

      SwiperSlide,

      'big-img':BigImg,

    },

    mounted(){

        

    //     this.$nextTick(() => {

    //     const swiperTop = this.$refs.swiperTop.$swiper

    //     const swiperThumbs = this.$refs.swiperThumbs.$swiper

    //     swiperTop.controller.control = swiperThumbs

    //     swiperThumbs.controller.control = swiperTop

    //   })

        this.getMap();

    },

    methods:{

        prev() {

            this.$refs.swiperThumbs.$swiper.slidePrev()

            let swiperTop = this.$refs.swiperTop.$swiper

                        let swiperThumbs = this.$refs.swiperThumbs.$swiper

                        //swiperTop.activeIndex = swiperThumbs.clickedIndex

                        let activeIndex=swiperThumbs.activeIndex;

                        swiperTop.slideTo(activeIndex,1000,false);

        },

        next() {

            this.$refs.swiperThumbs.$swiper.slideNext();

            let swiperTop = this.$refs.swiperTop.$swiper

                        let swiperThumbs = this.$refs.swiperThumbs.$swiper

                        console.log(swiperThumbs);

                        //swiperTop.activeIndex = swiperThumbs.clickedIndex

                        let activeIndex=swiperThumbs.activeIndex;

                        swiperTop.slideTo(activeIndex,1000,false);

        },

        getMap(){

            let mapCon=document.getElementById("container");

            if(mapCon){

                var map = new AMap.Map('container', {

                    zoom:11,//级别

                    center: [126.564543989, 43.8719883344],//中心点坐标

                    viewMode:'3D'//使用3D视图

                });

                console.log(map.getZoom());

                var infoWindow = new AMap.InfoWindow({ //创建信息窗体

                    isCustom: true,  //使用自定义窗体

                    content:'<div style="background-color:white;padding:10px;color:#667380;font-size:14px;">地址：吉林省吉林市</div>', //信息窗体的内容可以是任意html片段

                    offset: new AMap.Pixel(100, 10)

                });

                var onMarkerClick  =  function(e) {

                    infoWindow.open(map, e.target.getPosition());//打开信息窗体

                    //e.target就是被点击的Marker

                } 

                var marker = new AMap.Marker({

                    position:[126.564543989, 43.8719883344]//位置

                })

                console.log(map);

                map.add(marker);//添加到地图

                marker.on('click',onMarkerClick);//绑定click事件

            }

        },

        scrollPosition(index){

            if(index===0){

                document.querySelector("#landinformation_id").scrollIntoView(true);

            }else if(index===1){

                document.querySelector("#video_pic").scrollIntoView(true);

            }else if(index===2){

                document.querySelector("#mapposition").scrollIntoView(true);

            }else if(index===3){

                document.querySelector("#con").scrollIntoView(true);

            }

        },

        clickImg(e){

            this.showImg=true;

            this.imgSrc=e.currentTarget.src;

        },

        viewImg(){

            this.showImg=false;

        }

    }

}

</script>

 

<style scoped>

    .con{

        width:1280px;

        margin:0 auto;

    }

    .one{

        height:44px;

        line-height:44px;

        font-size:12px;

        color:#667380;

        display: flex;

        justify-content: space-between;

    }

    .one_route{

        display:inline-block;

    }

    .el-breadcrumb{

        font-size:12px;

        line-height:44px;

    }

    

    .one_left{

        display: flex;

        

    }

    .two{

        padding:20px;

        border:1px solid #E6E6E6;

        display:flex;

    }

    .class720{

        color:#0D1E43;

        font-size:14px;

        font-weight: 600;

        margin-bottom:10px;

    }

    .two_left{

        width:435px;

    }

    .two_right{

        width:785px;

        margin-left:10px;

    }

    .two_top{

        font-size: 12px;

        color:#0D1E43;

        display: flex;

        justify-content: space-between;

    }

    .two_two{

        margin-top:10px;

        height:80px;

        background-color:rgba(79, 136, 188, 0.15);

        opacity: 1;

        display: flex;

        align-items: center;

    }

    .two_two_status{

        width:52px;

        height:28px;

        line-height: 28px;

        text-align: center;

        background-color:rgba(254, 114, 50, 0.31);

        opacity: 1;

        border-radius: 4px;

        color:#FE7232;

        font-size:12px;

        margin-left:20px;

    }

    .two_two_title{

        color:#0D1E43;

        font-size:24px;

        font-weight: 600;

        margin-left:30px;

    }

    .two_two_landuse{

        width:76px;

        height:28px;

        line-height: 28px;

        text-align: center;

        background-color:rgba(180, 188, 196, 0.3);

        opacity: 1;

        border-radius: 4px;

        color:#667380;

        font-size:12px;

        margin-left:20px;

    }

    .two_two_line{

        color:#B4BCC4;

        margin:0px 10px 0px 10px;

    }

    .two_two_price{

        color:#667380;

        font-size:14px;

    }

   .two_two_money{

       color:#F5222D;

       font-weight: 600;

   }

    .list-right-list-data-two{

        display: flex;

        justify-content: space-between;

        margin-top:10px;

    }

    .list-title-last-img{

        display: flex;

        align-items: center;

    }

    .list-title-three-font{

        color:#667380;

        font-size:14px;

        margin-left:5px;

    }

    .three{

        border-top:1px solid #E6E6E6;

        border-bottom:1px dotted #E6E6E6;

        margin-top:10px;

        height:70px;

        display:flex;

    }

    .three_block{

        width:248px;

        text-align:center;

        font-size:14px;

        margin-top:10px;

        margin-bottom: 10px;

    }

    .price{

        font-size:12px;

        color:#B4BCC4;

        margin-top:10px;

    }

    

    /deep/ .el-input__inner{

        height:44px;

    }

    

    .five_left{

        display: flex;

        margin-top:40px;

        font-size:14px;

        color:#303D47;

    }

    .left_bottom{

        margin-top:15px;

    }

    .landinformation{

        /* height:504px; */

        border:1px solid #E6E6E6;

        margin-top:20px;

        padding:20px;

    }

    .infomation_title{

        height:44px;

        line-height:44px;

        border-bottom:1px solid #E6E6E6;

        display: flex;

        align-items: center;

    }

    .infomation_title_font{

        color:#0D1E43;

        font-size:16px;

        font-weight: 600;

    }

    .infomation_title_color{

        width:10px;

        height:22px;

        background-color:#1890FF;

        margin-right:10px;

    }

    .information_table{

        /* margin-top:10px; */

    }

    .information_table_row{

        height:40px;

        display: flex;

        margin-top:20px;

    }

    .information_table_label{

        border:1px solid #E6E6E6;

        line-height: 40px;

        text-align:center;

        width:230px;

        opacity:1;

        font-size:14px;

        color:#0D1E43;

        background-color:rgba(24, 144, 255, 0.1);

        opacity: 1;

    }

    .information_table_content{

        width:390px;

        line-height: 40px;

        text-align:center;

        border:1px solid #E6E6E6;

        font-size:14px;

        color:#0D1E43;

        opacity: 1;

    }

    .video{

        color:#0D1E43;

        font-size:14px;

        margin:20px 20px 20px 0px;

        font-weight: 600;

    }

    .video_show{

        display: flex;

        justify-content: space-between;

    }

    .last{

        margin-top:20px;

        border:1px solid #E6E6E6;

        margin-bottom:40px;

        padding:20px;

    }

    .scrollshow{

        border:1px solid #E6E6E6;

        border-radius:50%;

        width:50px;

        height:50px;

        color:#667380;

        font-size:12px;

        text-align:center;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        margin-bottom:10px;

    }

    .scrollshow:hover{

        color:#1890FF;

        cursor: pointer;

    }

    .scrollposition{

        position: fixed;

        top: 400px;

        right: 250px;

    }

    /deep/ .el-dialog{

        width:600px;

    }

    /deep/ .el-date-editor.el-input{

        width:440px;

    }

    /* /deep/ .el-input__inner{

        width:440px;

    } */

    /deep/ .el-form-item__content{

        margin-left:0px;

    }

    .pricediv{

        display: flex;

        align-items: center;

        justify-content: flex-end;

        width:370px;

    }

    .imgshow{

        position: relative;

    }

    .floatdiv{

        position:absolute;

        top:90px;

        left:160px;

        width:100px;

        text-align: center;

    }

    .fontcolor{

        color:white;

        font-size:16px;

        font-weight: 400;

    }

    .leftdivshow{

        width:24px;

        background-color: #000;

        opacity: 0.31;

    }

    .blockdiv{

        background-color: rgba(0, 0, 0, 0.5);

        opacity: 1;

        width:435px;

    }

 

</style>