swiper模拟手机的滑动，横竖滑动都可改变对应的内容。

「爱情、让人受尽委屈。」 2022-12-20 06:10 125阅读 0赞

##### 思路：给横向和纵向分别加上swiper，当滚动到相关的横/纵坐标处，跳转到对应的纵/横下标处。 #####

div树绘制：

<div class="effect">
      <div class="phone-box">
        <div class="row-tab">
          <div class="swiper-container myRow" ref="slider"> //横向swiper
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                :class="{ active: selectId == item.id }"
                v-for="(item, index) in feaList"
                :key="item.id"
                @click="changeRowTabs(item.id, index)"
              >
                { {  item.title }}
              </div>
            </div>
          </div>
        </div>
    
        <div class="column-tab">
          <div class="swiper-container myColumn" ref="columnSwiper">//纵向swiper
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="item in feaList"
                :key="item.id"
              >
                <img :src="item.img" />
                <span>{ {  item.title }}</span>
                <div class="desc">
                  { {  item.desc }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

JS逻辑实现过程：

data() { 
        return { 
          rowSwiper: "",
          columnSwiper: "",
          selectId: 0,
          feaList: [ //自己储存的数据结构
            { 
              id: 0,
              img: require("../loushu.png"),
              title: "dianzi",
              desc: "boom",
            },
            { 
              id: 1,
              img: require("../quwei.png"),
              title: "jt",
              desc: "youshi",
            },
            { 
              id: 2,
              img: require("../shapan.png"),
              title: "sp",
              desc:
                "jianzhu",
            },
            { 
              id: 3,
              img: require("../jianshang.png"),
              title: "js",
              desc: "ddd",
            },
            { 
              id: 4,
              img: require("../yangban.png"),
              title: "qj",
              desc: "cj",
            },
            { 
              id: 5,
              img: require("../../static/images/product/yuanlin.png"),
              title: "my",
              desc: "ylll",
            },
            { 
              id: 6,
              img: require("../system.png"),
              title: "SaaS",
              desc:
                " yj",
            },
            { 
              id: 7,
              img: require("../xiaoshou.png"),
              title: "xx",
              desc: " tools",
            },
          ],
        };
      },
      mounted() { 
        let that = this;
        that.rowSwiper = new Swiper(".myRow", { 
          slidesPerView: 3.5,
          freeMode: false,
          loop: false,
        });
        that.columnSwiper = new Swiper(".myColumn", { 
          direction: "vertical", //垂直方向滚动
          slidesPerView: "auto",
          on: { 
            slideChange() { 
              that.selectId = this.activeIndex;
              that.rowSwiper.slideTo(this.activeIndex, 300, false);
            },
          },
        });
      },
      methods: { 
        changeRowTabs(id, index) {  //选中横向下标时对应的纵向跳转到对应下标
          this.selectId = id;
          this.columnSwiper.slideTo(index, 300, false);
        },
      },

精美CSS：

.effect { 
      display: flex;
      justify-content: center;
      height: 668px;
      background: url('../../static/images/product/effect_bg.png') no-repeat;
    
      .phone-box { 
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: url('../../static/images/product/phone_box.png') no-repeat;
        width: 286px;
        height: 641px;
      }
    
      .row-tab { 
        margin: -60px 20px 0 28px;
        width: 239px;
        cursor: pointer;
    
        .swiper-slide { 
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: center;
        }
    
        .swiper-slide.active { 
          position: relative;
          color: #333333;
        }
    
        .swiper-slide.active::after { 
          position: absolute;
          top: 15px;
          left: 50%;
          transform: translateX(-50%);
          content: '';
          width: 21px;
          height: 1px;
          background: #333333;
        }
      }
    
      .column-tab { 
        margin-top: 50px;
        margin-left: 64px;
        width: 229px;
        max-height: 438px;
        border-radius: 0px 0px 20px 20px;
    
        .swiper-container { 
          width: 229px;
          max-height: 388px;
        }
    
        .swiper-slide { 
          margin-bottom: 98px;
          width: 220px;
    
          span { 
            text-align: center;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #333333;
            padding-left: 10px;
          }
    
          .desc { 
            width: 167px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 32px;
            margin-top: 24px;
          }
        }
      }
    }