uniapp 微信小程序 css翻页效果

在 Uniapp 中，可以使用 CSS3 的动画效果来实现翻页效果。下面是一个示例代码，演示如何在微信小程序中使用 CSS 实现翻页效果：

<template>
  <view class="container">
    <view class="page" :class="{ active: currentPage === 1 }">Page 1</view>
    <view class="page" :class="{ active: currentPage === 2 }">Page 2</view>
    <view class="page" :class="{ active: currentPage === 3 }">Page 3</view>
  </view>
</template>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.page {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  transform: translateX(100%);
}

.page.active {
  transform: translateX(0);
}
</style>

<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  }
};
</script>

在上面的代码中，我们使用了一个容器 `.container` 来包含三个页面，每个页面都有一个类名为 `.page`。通过给不同的页面添加 `.active` 类，可以控制页面的显示和隐藏。

在 CSS 中，我们使用 `transform` 属性来实现页面的平移效果。通过修改每个页面的 `transform` 属性值，可以控制页面的位置，从而实现翻页的效果。

通过修改 `currentPage` 数据的值，可以切换不同的页面。例如，设置 `currentPage` 为 1，显示第一个页面；设置为 2，显示第二个页面。

希望能帮到你！如有任何问题，请随时提问。