uniapp 横向列表 左右滑动翻页效果

<template>
  <view>
    <swiper class="swiper" :current="current" @change="swiperChange">
      <swiper-item v-for="(page, index) in pages" :key="index">
        <view class="page">
          <view v-for="(item, i) in page" :key="i" class="item">
            <image :src="item.image" class="image"></image>
            <text class="info">{{ item.info }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      items: [
        { image: "image1.jpg", info: "信息1" },
        { image: "image2.jpg", info: "信息2" },
        { image: "image3.jpg", info: "信息3" },
        { image: "image4.jpg", info: "信息4" },
        { image: "image5.jpg", info: "信息5" },
        { image: "image6.jpg", info: "信息6" },
        // 添加更多的图片和信息
      ]
    };
  },
  computed: {
    pages() {
      const pageSize = 3;
      const pageCount = Math.ceil(this.items.length / pageSize);
      const pages = [];
      for (let i = 0; i < pageCount; i++) {
        const start = i * pageSize;
        const end = start + pageSize;
        pages.push(this.items.slice(start, end));
      }
      return pages;
    }
  },
  methods: {
    swiperChange(e) {
      this.current = e.detail.current;
    }
  }
};
</script>

<style>
.swiper {
  width: 100%;
  height: 200px;
}

.page {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.item {
  flex: 1;
  margin: 0 5px;
}

.image {
  width: 100%;
  height: 100px;
}

.info {
  text-align: center;
}
</style>