swiper实现点击后元素始终在中间位置

慵懒的高级动物

已于 2023-07-27 09:52:19 修改

阅读量1k

点赞数

文章标签： javascript vue.js 前端

于 2023-07-27 09:38:02 首次发布

本文链接：https://blog.csdn.net/weixin_43837361/article/details/131952766

版权

介绍

Vue中引入swiper,实现多个元素平铺排列时，点击后元素始终会滚到中间位置，并且可以拖拽，

引入swiper

import Swiper from ‘swiper’

dom示例

    <div class="swiper"  ref="myswiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide "
             v-for="(item,index) in detail.ques"
             :key="item.id">{{index+1}}</div>
      </div>
    </div>

swiper初始化

  mounted () {
    this.swiper = new Swiper('.swiper', {
      slidesPerView: 'auto',
      spaceBetween: 26,
      centeredSlides: true,
      slideToClickedSlide: true,
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, // 修改swiper的父元素时，自动初始化swiper
      touchEventsTarget: 'container' // 接受touch事件的目标
    })
    this.swiper.on('slideChange', (e) => {
      const { activeIndex } = e
      this.tabChange(activeIndex)
    })
    this.swiper.slideTo(this.index, 1000, false)
    console.log('this.swiper', this.swiper)
  },

样式示例

  .swiper{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    touch-action: pan-y;
    .swiper-wrapper{
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      transition-property: transform;
      box-sizing: content-box;
      padding: 24px 0;
      .swiper-slide{
        position: relative;
        width: 90px;
        min-width:90px;
        height: 90px;
        font-size: 36px;
        text-align: center;
        line-height: 90px;
        border-radius: 50%;
        border: 1px solid $theme-stu-error;
        transition-property: transform;
      }
    }
    .swiper-slide-active{
      background:$theme-stu-error;
      color:#fff;
      &::after {
        content: "";
        position: absolute;
        bottom:-24px;
        left: calc(45px - 18px);
        background-color: #f64e5e;
        width: 36px;
        height: 4px;
      }
    }
    .swiper-scrollbar {
      border-radius: 10px;
      position: relative;
      -ms-touch-action: none;
      background: rgba(0,0,0,.1);
      position: absolute;
      left: 1%;
      bottom: 3px;
      z-index: 50;
      height: 5px;
      width: 98%;
    }
  }