uni-app 左右切换页面

在uni-app中实现左右切换页面的功能，可以通过使用swiper组件来实现。swiper组件是uni-app提供的一个滑动视图容器，支持左右滑动切换页面。下面是一个简单的示例代码，展示了如何使用swiper组件来实现左右切换页面的功能。

首先，在pages目录下创建一个新的页面，例如swiperPage，并在该页面的.vue文件中编写以下代码：

<template>
  <view class="container">
    <swiper
      class="swiper"
      :indicator-dots="true"
      autoplay="{{false}}"
      interval="{{5000}}"
      duration="{{1000}}"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in items" :key="index" class="swiper-item">
        <view class="swiper-content">
          <text>{{item.text}}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '页面1' },
        { text: '页面2' },
        { text: '页面3' }
      ],
      currentIndex: 0
    };
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
      console.log('当前页面索引:', this.currentIndex);
    }
  }
};
</script>

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

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.swiper-content {
  padding: 20px;
  font-size: 24px;
  color: #333;
}
</style>

在上面的代码中，我们使用了swiper组件，并通过v-for指令循环渲染了多个swiper-item。每个swiper-item代表一个页面，其中包含了页面的内容。我们通过设置indicator-dots属性来显示指示点，并绑定了onSwiperChange事件来处理滑动切换时的逻辑。

在data中，我们定义了一个items数组，用于存储每个页面的内容。在methods中，我们定义了onSwiperChange方法，用于获取当前页面的索引，并在控制台中打印出来。

最后，我们在style中定义了一些基本的样式，使swiper组件在页面上居中显示，并为每个swiper-item设置了背景颜色和内边距等样式。

这样，我们就实现了一个简单的左右切换页面的功能。你可以根据自己的需求，进一步自定义swiper组件的样式和行为。