uniapp swiper组件中，图片居中显示

可以使用以下样式：

swiper-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将使图片在水平和垂直方向上居中显示。同时，也要确保在 `swiper` 组件中设置了 `swiper-image` 的宽度和高度，以确保图片可以在居中的同时保持其原始尺寸。

相关问题

uniapp swiper 点击当前项居中显示

要实现当前项居中显示，可以通过以下几个步骤：

1. 在 `swiper` 标签上添加 `bindchange` 事件，用来监听当前项的变化。

2. 在 `swiper` 组件中定义一个 `current` 变量，用来记录当前项的下标。

3. 在 `swiper-item` 标签上添加 `catchtap` 事件，用来监听用户点击事件。

4. 在 `catchtap` 事件中，获取当前点击项的下标，并将其赋值给 `current` 变量。

5. 在 `bindchange` 事件中，根据 `current` 变量的值计算出当前项应该居中显示的位置，并通过 `swiper` 组件的 `scrollLeft` 属性实现滚动到该位置。

以下是示例代码：

<swiper bindchange="swiperChange" current="{{ current }}">
  <swiper-item catchtap="itemClick" wx:for="{{ list }}" wx:key="{{ item.id }}">
    <!-- item content -->
  </swiper-item>
</swiper>

<script>
Page({
  data: {
    list: [
      // swiper items
    ],
    current: 0 // 当前项下标
  },

  // swiper change event
  swiperChange(e) {
    this.setData({
      current: e.detail.current
    });

    // 计算当前项居中显示的位置
    let query = wx.createSelectorQuery().in(this);
    query.select('.swiper-item').boundingClientRect((rect) => {
      let screenWidth = wx.getSystemInfoSync().windowWidth;
      let itemWidth = rect.width;
      let scrollLeft = e.detail.current * itemWidth - (screenWidth - itemWidth) / 2;
      this.setData({
        scrollLeft: scrollLeft
      });
    }).exec();
  },

  // item click event
  itemClick(e) {
    let index = e.currentTarget.dataset.index;
    this.setData({
      current: index
    });
  }
})
</script>

uniapp swiper组件中，如何设置swiper和swiper-item，使得 image 图片居中显示

可以在 swiper-item 中使用 flex 布局，将图片居中显示。具体操作如下：

1. 在 swiper-item 中添加一个 div 容器，设置为 flex 布局。

2. 在该容器中再添加一个 img 标签，设置图片的宽度为 100%。

3. 在样式中设置该容器的 justify-content 和 align-items 属性为 center，使其水平和垂直居中。

示例代码：

<swiper>
  <swiper-item>
    <div class="image-container">
      <img src="your-image-url" />
    </div>
  </swiper-item>
</swiper>

<style>
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.image-container img {
  width: 100%;
}
</style>

这样就可以让图片在 swiper 中居中显示了。