需求

最近有一个新需求，当右边点击小图的时候，左边要显示点击的对应的信息或者图片，并且顺序一定是1-2-3-4-5-6-7连接的这种。当点击第4张小图的时候的顺序应该为 4-5-6-7-1-2-3。
效果如图所示：

要实现的效果：

实现代码如下：

<template>
    <div id="text">
        <div class="text-box">
            <div class="showbox">
                <img :src="clickedImg" alt="img" />
            </div>
            <div class="box">
                <div v-for="(item, index) in images" :key="index" @click="handleClick(index)">
                    <span>{{item.index}}</span>
                    <img :src="item.img" alt="img" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TriangleBox',
    data() {
        return {
            images: [
                {img: require('@/static/images/m_third_Bicon1.png'), index: 1},
                {img: require('@/static/images/m_third_Bicon2.png'), index: 2},
                {img: require('@/static/images/m_third_Bicon3.png'), index: 3},
                {img: require('@/static/images/m_third_Bicon4.png'), index: 4},
                {img: require('@/static/images/m_third_Bicon5.png'), index: 5},
                {img: require('@/static/images/m_third_Bicon6.png'), index: 6},
                {img: require('@/static/images/m_third_Bicon7.png'), index: 7},
            ],
            clickedImg: require('@/static/images/m_third_Bicon1.png'),
        }
    },
    methods: {
        handleClick(index) {
            this.clickedImg = this.images[index].img;
            // 获取到之前的数组
            const befores = this.images.splice(0,index);
            //这一步是插入
            this.images.push(...befores);
        }
    }
}
</script>

<style lang="scss" scoped>
#text {
    padding: 90px 0;
}

.text-box {
    width: 100%;
    max-width: 732px;
    margin: 0 auto;
    overflow: hidden;
}
</style>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% / 3);
    position: relative;
}

.box div {
    width: 100%;
    height: 112px;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    overflow: hidden;
    span {
        position: absolute;
        color: antiquewhite;
    }
    &:nth-child(6){
        position: absolute;
        top: calc(112px * 4);
        right: calc(100%);
    }
    &:nth-child(7){
        position: absolute;
        top: calc(112px * 4);
        right: calc(100% * 2);
    }
}

.box img {
    max-width: 100%;
    max-height: 100%;
}

.showbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% / 3) * 2);
    height: calc(112px * 4);
    position: relative;
    float: left;
    background-color: antiquewhite;
}

.showbox img {
    max-width: 100%;
}
</style>

主要实现逻辑就是：

首先先把布局搭建起来，主要用了flex布局和定位，因为考虑到分辨率兼容的问题所以宽用的是百分比。其次就是逻辑处理，用到了splice和push。要先获取到点击的图片的索引或者唯一标识，然后在数组中查找到该一项，然后获取到到此项之前的数据（上面代码中的befores）再插入到数组中就完成了。

补充如果想实现动态循环效果的话，就不需要改变数据顺序，需要改变的就是盒子位置，让dom盒子进行移动。代码如下：

<template>
    <div class="mobile-third">
        <div class="m-scene-wrap">
            <div class="show-content">
                <div class="m-show-img">
                    <img :src="checkedData.img" alt="" />
                </div>
                <div class="m-show-txt">
                    <div class="m-show-tit">{{checkedData.mtext}}</div>
                    <div>{{checkedData.maxCon}}</div>
                </div>
            </div>
            <div class="m-scene-conts">
                <div v-for="(item, index) in minData" :key="index" :data-index="index" class="m-scene-item" :style="{backgroundImage: 'url(' + item.bgImg + ')', top: item.top, right: item.right}" @click="changeShow(index)">
                    <div class="m-tit">{{item.text}}</div>
                    <img :src="item.icon" alt="" width="17" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default { 
    data () {
        return {
            posData: [{
                top: '0px',
                right: '200%',
            },{
                top: '0px',
                right: '0px',
            },{
                top: '112px',
                right: '0px',
            },{
                top: '224px',
                right: '0px',
            },{
                top: '336px',
                right: '0px',
            },{
                top: '448px',
                right: '0px',
            },{
                top: '448px',
                right: '100%',
            },{
                top: '448px',
                right: '200%',
            }],
            minData: [
                {
                    text: "1",
                    mtext: "1",
                    maxCon: "描述1",
                    img: require("../../static/images/third_Bicon8.png"),
                    icon: require("../../static/images/third_icon7.png"),
                    bgImg: require('../../static/images/third_bg7.png'),
                }, {
                    text: "2",
                    mtext: "2",
                    maxCon: "描述2",
                    img: require("../../static/images/third_Bicon1.png"),
                    icon: require("../../static/images/third_icon8.png"),
                    bgImg: require('../../static/images/third_bg8.png'),
                }, {
                    text: "3",
                    mtext: "3",
                    maxCon: "描述3",
                    img: require("../../static/images/third_Bicon2.png"),
                    icon: require("../../static/images/third_icon1.png"),
                    bgImg: require('../../static/images/third_bg1.png'),           
                }, {
                    text: "4",
                    mtext: "4",
                    maxCon: "描述4",
                    img: require("../../static/images/third_Bicon3.png"),
                    icon: require("../../static/images/third_icon4.png"),
                    bgImg: require('../../static/images/third_bg4.png'),
                }, {
                    text: "5",
                    mtext: "5",
                    maxCon: "描述5",
                    icon: require("../../static/images/third_icon2.png"),
                    img: require("../../static/images/third_Bicon4.png"),
                    bgImg: require('../../static/images/third_bg2.png'),                  
                }, {
                    text: "6",
                    mtext: "6",
                    maxCon: "描述6",
                    img: require("../../static/images/third_Bicon7.png"),
                    icon: require("../../static/images/third_icon6.png"),
                    bgImg: require('../../static/images/third_bg6.png'),
                }, {
                    text: "7",
                    mtext: "7",
                    maxCon: "描述7",
                    img: require("../../static/images/third_Bicon6.png"),
                    icon: require("../../static/images/third_icon3.png"),
                    bgImg: require('../../static/images/third_bg3.png'), 
                }, {
                    text: "8",
                    mtext: "8",
                    maxCon: "描述8",
                    img: require("../../static/images/third_Bicon5.png"),
                    icon: require("../../static/images/third_icon5.png"),
                    bgImg: require('../../static/images/third_bg5.png'),
                }, 
            ],
            // 选中数据
            checkedData: {},
        }
    },
    mounted () {
        this.minData.forEach((item, index) => {
            item.top = this.posData[index].top;
            item.right = this.posData[index].right;
        })
        this.checkedData = {
            text: "1",
            mtext: "1",
            maxCon: "描述1",
            img: require("../../static/images/third_Bicon8.png"),
            icon: require("../../static/images/third_icon7.png"),
            bgImg: require('../../static/images/third_bg7.png'),
        };
    },
    methods: {
        changeShow(index) {
            this.checkedData = this.minData[index];
            const mindata1 = [...this.minData];
            const befores = mindata1.splice(0,index);
            const hou = this.posData.slice(-(befores.length));
            befores.forEach((item, index) => {
                item.top = hou[index].top;
                item.right = hou[index].right;
            })
            mindata1.unshift(...befores);
            const mindata2 = [...this.minData];
            const afters = mindata2.splice(index,this.minData.length);
            const qian = this.posData.slice(0, afters.length);
            afters.forEach((item, index) => {
                item.top = qian[index].top;
                item.right = qian[index].right;
            })
            this.minData = [];
            this.minData = [...befores,...afters];
            // 只改变数据顺序
            // this.checkedData = this.minData[index];
            // const befores = this.minData.splice(0, index);
            // this.minData.push(...befores);

        }
    }
}
</script>
<style lang="scss" scoped>
.mobile-third{
    .m-scene-wrap {
        width: 100%;
        max-width: 734px;
        margin: 0 auto;
        overflow-x: hidden;
        padding: 60px 0 0;
        min-height: calc(112px * 5 + 60px);
    }
    .show-content {
        float: left;
        width: calc((100% / 3) * 2);
        height: calc(112px * 4);
        position: relative;
        z-index: 100;
        background-image: linear-gradient(207deg, rgba(255,115,39,1) 6%, rgba(254,177,75,1) 100%);
    }
    .m-show-img {
        position: absolute;
        right: 0;
        top: -30px;
        width: 275px;
        height: 330px;
        img {
            width: 100%;
        }
    }
    .m-show-txt {
        @include pageFont(12px,#ffffff,500,'PingFangSC-Regular',20px);
        max-width: 70%;
        position: absolute;
        bottom: 50px;
        left: 20px;
        .m-show-tit {
            font-size: 18px;
            margin-bottom: 16px;
        }
    }
    .m-scene-conts {
        float: right;
        width: calc(100% / 3);
        position: relative;
    }
    .m-scene-item {
        cursor: pointer;
        width: 100%;
        height: 112px;
        cursor: pointer;
        position: absolute;
        top: 0px;
        right: 0px;
        border-bottom: 1px solid #2b2b2b;
        border-right: 1px solid #2b2b2b;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: right bottom;
        background-color: #000;
        padding: 20px 0px 20px 20px;
        transition: all 0.4s ease;
        .m-tit {
            @include pageFont(18px,#ffffff,500,'PingFangSC-Regular',24px);
            margin-bottom: 20px;
        }
    }
}
</style>

希望能帮到各位实现效果啦～