uniapp左右滑动切换内容

在Uniapp中，可以使用`swiper`组件实现左右滑动切换内容的效果。具体实现步骤如下：

1. 在页面中引入`swiper`组件：

<swiper>
  <swiper-item>
    <!-- 第一页内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页内容 -->
  </swiper-item>
  ...
</swiper>

2. 在`swiper`组件中添加`indicator-dots`属性，使得可以显示分页指示器：

<swiper indicator-dots>
  <swiper-item>
    <!-- 第一页内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页内容 -->
  </swiper-item>
  ...
</swiper>

3. 可以使用`current`属性来控制当前显示的页数，通过左右滑动来改变`current`属性的值：

<swiper indicator-dots :current="current">
  <swiper-item>
    <!-- 第一页内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页内容 -->
  </swiper-item>
  ...
</swiper>

export default {
  data() {
    return {
      current: 0 // 当前显示的页数
    };
  },
  methods: {
    // 滑动切换页面时触发
    swiperChange(event) {
      this.current = event.detail.current;
    }
  }
};

完整代码示例：

<template>
  <view>
    <swiper indicator-dots :current="current" @change="swiperChange">
      <swiper-item>
        <view class="page1">
          <text>第一页</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page2">
          <text>第二页</text>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="page3">
          <text>第三页</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0 // 当前显示的页数
    };
  },
  methods: {
    // 滑动切换页面时触发
    swiperChange(event) {
      this.current = event.detail.current;
    }
  }
};
</script>

<style scoped>
.page1 {
  background-color: #f00;
  height: 100vh;
}
.page2 {
  background-color: #0f0;
  height: 100vh;
}
.page3 {
  background-color: #00f;
  height: 100vh;
}
</style>