美文网首页
nuxt3实现路由/页面切换左右滚动效果

nuxt3实现路由/页面切换左右滚动效果

作者: Xbbing | 来源:发表于2024-07-10 11:13 被阅读0次

效果

1、点击订单中心时 页面从右向左滚动动画效果切屏

image.png

2、点击产品购买时 页面从左向右滚动动画效果切屏

image.png

实现步骤

  1. nuxt.config.ts文件
export default defineNuxtConfig({
  app: {
      pageTransition: { name: 'page', mode: 'out-in' }
  }
})
  1. app.vue文件
<template>
    <main :class="{left: currentName == 'purchase', right: currentName == 'order'}">
        <NuxtLayout>
            <!-- <NuxtPage /> -->
            <NuxtPage keepalive/>
        </NuxtLayout>  
    </main>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
useHead({
  meta: [
      {name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' }
  ]
})

const currentName = ref()
watch(() => route.name, (current) => {
    currentName.value = current
})

</script>

<style lang="scss">
body, html {
    width: 100%;height: 100%;font-size: 12px; padding: 0; margin: 0;
}
.left {
    .page-enter-active,.page-leave-active {
        transition: transform 0.1s ease-in-out;
    }
    .page-enter-from  {
        transform: translateX(100%);
    }
    .page-leave-to{
        transform: translateX(-100%);
    }
}
.right {
    .page-enter-active,.page-leave-active {
        transition: transform 0.1s ease-in-out;
    }
    .page-enter-from  {
        transform: translateX(-100%);
    }
    .page-leave-to{
        transform: translateX(100%);
    }
}
</style>

相关文章

  • Swift版-表情键盘展示和仿网易新闻首页左右滑动

    Swift仿网易新闻首页左右滑动切换页面 顶部标题左右滑动切换控制器是一种非常用的左右滚动切换效果,几乎每一个AP...

  • iOS 自定义分段切换控件

    以上就是实现的效果,支持左右滚动进行切换。我们在实现上用到了Masonry 和UIView+LGJExtensio...

  • 2018-08-16使用router-view同页面加载多路由

    描述:用路由方式实现单页面加载多页面,并且切换页面后状态还是保存的,类似于单页面实现标签页,切换标签页实现内容显示...

  • 路由

    路由帮我们切换组件,帮我们跳转页面(整个项目就一个页面是通过切换组件是想的页面切换效果)

  • 滚动行为

    滚动行为 应用场景 : 在一个路由组件中滚动页面,切换到另一个组件中时,滚动条自动恢复到页面顶端的位置 下面的代...

  • vue-router跳转滚动的问题(scrollBehavior

    使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。这个功能只在支持...

  • vue router 多路由及路由嵌套

    在 vue 中使用 router 进行前端路由,可实现不跳转切换页面或局部切换页面,而且往往需要进行局部切换页面的...

  • 页面滚动iscroll插件(移动端)

    作用:实现页面的滚动 移动端、pc端页面滚动 iscrolls 是什么? 一个可以实现客户端原生滚动效果的类库。 ...

  • 实现图片的切换

    pc端,实现简单图片切换在App中这种效果比较常见,两种效果的切换。html页面 js页面

  • ionic-native-transitions调用原生页面切换

    ionic-native-transitions调用原生页面切换实现ionic路由切换,让你的ionic应用比原生...

网友评论

      本文标题:nuxt3实现路由/页面切换左右滚动效果

      本文链接:https://www.haomeiwen.com/subject/jrxthjtx.html