在uniapp页面做一个滑动页面的动画效果

在UniApp页面中，可以使用uni-app提供的动画组件和CSS样式来实现滑动页面的动画效果。下面是一个简单的示例：

首先，在<template>标签中添加一个滑动页面的容器，例如：

<template>
  <view class="slide-container">
    <!-- 页面内容 -->
  </view>
</template>

在<style>标签中定义容器的样式，例如：

<style>
.slide-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}
</style>

在<script>标签中添加滑动页面的逻辑，例如：

<script>
export default {
  data() {
    return {
      startX: 0,  // 记录触摸起始位置
      currentX: 0,  // 记录当前位置
      slideWidth: 0,  // 滑动页面的宽度
      slideIndex: 0  // 当前页面索引
    }
  },
  methods: {
    // 触摸开始事件
    touchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    // 触摸移动事件
    touchMove(e) {
      const moveX = e.touches[0].clientX - this.startX;
      const translateX = this.currentX + moveX;
      this.slideContainerStyle.transform = `translateX(${translateX}px)`;
    },
    // 触摸结束事件
    touchEnd(e) {
      const moveX = e.changedTouches[0].clientX - this.startX;
      if (Math.abs(moveX) > this.slideWidth / 2) {
        // 滑动距离超过一半时，切换至下一页或上一页
        this.slideIndex = moveX > 0 ? this.slideIndex - 1 : this.slideIndex + 1;
      }
      this.currentX = -this.slideWidth * this.slideIndex;
      this.slideContainerStyle.transform = `translateX(${this.currentX}px)`;
    }
  },
  computed: {
    slideContainerStyle() {
      return {
        transform: `translateX(${this.currentX}px)`
      }
    }
  },
  mounted() {
    // 获取滑动页面的宽度
    const query = uni.createSelectorQuery().in(this);
    query.select('.slide-container').boundingClientRect((rect) => {
      this.slideWidth = rect.width;
    }).exec();
  }
}
</script>

在上述示例中，通过touchStart、touchMove和touchEnd方法来处理滑动页面的逻辑，通过computed属性slideContainerStyle来动态设置页面容器的样式。在mounted钩子函数中，通过uni.createSelectorQuery()获取滑动页面容器的宽度。

注意：上述示例仅为演示滑动页面的基本逻辑，具体的动画效果和交互细节可以根据实际需求进行调整和扩展