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生命周期钩子中，避免重复计算。