uniapp 实现左侧离开 右侧进来

uniApp是一个基于Vue.js的跨平台框架，用于快速构建原生应用。如果你想在uniApp项目中实现左右滑动切换页面的功能，通常可以使用内置的`Swiper`组件或者自定义滚动区域配合`van-tabs`组件。

以下是一个简单的示例：

1. 首先，在需要滑动切换的界面引入`Swiper`组件：

<template>
  <view class="swipe-container">
    <swiper :options="swiperOptions">
      <!-- 左侧菜单 -->
      <swiper-item v-for="(item, index) in leftItems" :key="index">
        <navigator :url="'page-' + item.path"></navigator>
      </swiper-item>

      <!-- 右侧内容区域 -->
      <swiper-item>
        <view>右侧内容区域</view>
      </swiper-item>
    </swiper>
  </view>
</template>

2. 在`script`部分设置`swiperOptions`配置：

<script setup>
import { swiper, swiperItem } from 'vant';
import { ref } from 'vue';

const leftItems = [
  // ...左侧菜单的配置项，包括路径等
];

let swiperOptions = {
  direction: 'horizontal', // 水平滑动
  loop: false,
  autoplay: false, // 自动轮播
  clickable: true, // 点击导航栏滑动
  indicatorDots: false, // 切换指示点
  onSlideChangeStart: (toIndex) => {
    // 当开始滑动时，切换内容区域和左侧菜单
    if (toIndex === 0) {
      // 展示左侧菜单，隐藏右侧内容
      // 这里只是一个伪代码，你需要根据实际布局调整样式
      document.getElementById('rightContent').style.display = 'none';
      document.getElementById('leftMenu').style.display = 'block';
    } else if (toIndex === 1) {
      // 展示右侧内容，隐藏左侧菜单
      document.getElementById('rightContent').style.display = 'block';
      document.getElementById('leftMenu').style.display = 'none';
    }
  },
};

// 初始化 Swiper 组件
const swiperRef = ref();
setup() {
  swiper.use(swiperRef);
  swiperRef.value.create({
    el: '.swipe-container',
    ...swiperOptions
  });
}
</script>

在这个例子中，左侧的菜单在屏幕左侧显示，右侧的内容在屏幕右侧。当滑动到第一项时，右侧内容区显示，左侧菜单隐藏；反之亦然。