swiper 点击当前项居中显示

要实现点击当前项居中显示，可以使用Swiper的回调函数onTap，结合Swiper的API方法slideTo，具体实现步骤如下：

1. 在Swiper组件中加入onTap回调函数，代码如下：

<Swiper
  onTap={(swiper, e) => {
    // 点击当前项
    if (swiper.clickedIndex === swiper.activeIndex) {
      // 居中显示
      swiper.slideTo(swiper.clickedIndex, 300, false);
    }
  }}
>
  // Swiper的内容项
</Swiper>

2. 在onTap回调函数中，判断点击的项是否为当前项，如果是，则调用Swiper的slideTo方法将该项居中显示。

其中，slideTo方法的第一个参数是要滑动到的项的索引，第二个参数是滑动的速度，第三个参数表示是否启用动画效果。

相关问题

uniapp swiper 点击当前项居中显示

要实现uniapp中swiper点击当前项居中显示，可以使用swiper的change事件和uni.createSelectorQuery()方法，具体实现步骤如下：

1. 在swiper组件中加入change事件，代码如下：

<swiper @change="swiperChange">
  // swiper的内容项
</swiper>

2. 在对应的vue组件中定义swiperChange方法，代码如下：

methods: {
  swiperChange(e) {
    const query = uni.createSelectorQuery().in(this);
    // 获取swiper-item的宽度
    query.select('.swiper-item').boundingClientRect(data => {
      // 计算居中的位置
      const center = (uni.getSystemInfoSync().windowWidth - data.width) / 2;
      // 计算当前项的偏移量
      const offset = e.detail.current * data.width;
      // 计算滑动的距离
      const distance = center - offset;
      // 滑动swiper
      uni.createSelectorQuery().in(this.$refs.swiper).select('.uni-swiper__wrapper').fields({
        size: true
      }, wrapperData => {
        this.$refs.swiper.swiperRef().scrollBy({
          left: distance,
          top: 0,
          behavior: 'smooth'
        });
      }).exec();
    }).exec();
  }
}

3. 在swiper-item中设置类名为swiper-item，以便在上述方法中获取该元素的宽度，代码如下：

<swiper-item class="swiper-item">
  // swiper-item的内容
</swiper-item>

4. 通过uni.createSelectorQuery()获取swiper-item的宽度，并根据当前项的位置计算需要滑动的距离，调用swiper的scrollBy方法滑动到指定位置。

上述方法中，获取swiper-item宽度和计算居中位置的代码可以提取到mounted生命周期钩子中，避免重复计算。

swiper 多张滑动点击居中

要实现swiper多张滑动点击居中的效果，可以使用Swiper的onSlideChangeEnd事件和activeIndex属性来判断当前滑块位置，然后根据计算居中的位置，再使用Swiper的slideTo方法来实现滑动居中的效果。

具体实现步骤如下：

1. 在Swiper的初始化参数中添加onSlideChangeEnd事件处理函数，用于监听滑块位置的变化。

2. 在onSlideChangeEnd事件处理函数中，获取当前滑块的位置（activeIndex），并根据需要计算出居中的位置。

3. 调用Swiper的slideTo方法来滑动到居中的位置。

下面是一个示例代码：

var mySwiper = new Swiper('.swiper-container', {
    //初始化参数
    onSlideChangeEnd: function(swiper){
        //获取当前滑块位置
        var activeIndex = swiper.activeIndex;

        //计算居中位置
        var centerIndex = Math.floor(swiper.slides.length / 2);
        var offset = centerIndex - activeIndex;

        //滑动到居中位置
        swiper.slideTo(centerIndex + offset);
    }
});

在这个示例中，假设Swiper容器的类名为“swiper-container”，滑块的数量为n（从0到n-1），则居中位置的索引为Math.floor(n / 2)。对于当前滑块的位置activeIndex，通过计算偏移量offset来实现居中滑动效果。

需要注意的是，这个示例代码只是一个简单实现，具体实现方式还需要根据具体需求进行调整。