vue实现移动端页面切换效果

最新推荐文章于 2023-09-10 17:36:42 发布
最新推荐文章于 2023-09-10 17:36:42 发布
阅读量324 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Strong-stone/p/10650145.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
* { padding: 0; margin: 0; }
html, body, #app { width: 100%; height: 100%; }
.one { height: 100%; background-color: yellow; }
.two { background-color: tomato; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.three { background-color: #ffe69f; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.v-enter-active, .v-leave-active { transition: all 0.3s; }
.v-enter, .v-leave-to { transform: translateX(100%); }
</style>
</head>
<body>
<div id="app">
<div class="one">
<p>
<router-link to="/foo">下一层</router-link>
</p>
<h1>第一层</h1>
</div>
<transition>
<router-view></router-view>
</transition>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const Foo = {
template: `
<div class="whole-page two">
<router-link to="/foo/bar">下一层</router-link>
<router-link to="/">返回</router-link>
<h1>第二层</h1>
<transition>
<router-view></router-view>
</transition>
</div>
`
}
const Bar = {
template: `
<div class="whole-page three">
<router-link to="/foo">返回</router-link>
<h1>第三层</h1>
<transition>
<router-view></router-view>
</transition>
</div>
`
}
const routes = [
{ path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar } ] }
]
const router = new VueRouter({ routes })
const app = new Vue({ router }).$mount('#app')
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Strong-stone/p/10650145.html

weixin_30344795
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现移动端页面切换效果【推荐】
10-17
本篇文章将详细介绍如何利用Vue实现移动端页面切换，通过实例代码来展示具体操作。 首先，为了实现页面切换，我们需要使用Vue Router，它是Vue.js官方的路由管理器，允许我们定义页面路由并处理导航。在提供的代码...
Vue3 Transition组件给页面切换加动画效果
热门推荐
前端咸鱼翻身的博客
05-05 1万+
使用Vue3自带的Transition组件给页面组件之间切换加过渡效果，主要应用在移动端设备，改善用户的交互体验。
使用vue-router切换页面时实现设置前进后退过渡动画_vue.js
最新发布
細水、長流√的专栏
09-10 1511
今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.每次切换时向左向右切换动画如何实现。如何判断切换路由时是前进还是后退。
Vue动态切换PC端与移动端
acheding的博客
10-25 2207
通过监听客户端宽度（clientWidth）的方式来实现动态修改布局及样式。
使用vue-touch实现移动端左右滑动屏幕切换页面
duo1207的博客
06-20 9436
1.安装vue-touch npm install vue-touch@next --save 2.在main.js中引入 import VueTouch from 'vue-touch' Vue.use(VueTouch,{name:'v-touch'}) VueTouch.config.swipe = { threshold:50 //设置左右滑动的距离 } 3.在路由的in...
vue实现页面切换滑动效果
01-19
试着用Vue做了个页面切换时滑动的效果，如下示例，源码 这里使用了Vue的transition组件，具体可见文档 直接看实现过程 先在本机安装vue-cli npm install -g @vue/cli 初始化一个项目 vue create hello-world 创建...
基于Vue实现页面切换左右滑动效果
08-29
通过基于Vue实现页面切换左右滑动效果，可以实现页面之间的滑动切换效果，提高用户体验。以下是相关知识点的详细介绍： 一、页面切换左右滑动效果的实现 要实现页面切换左右滑动效果，需要使用Vue的transition组件...
vue移动端路由切换实例分析
08-27
Vue 移动端路由切换是开发移动端应用时的关键技术，它允许用户在不同的页面之间平滑过渡，并且处理页面间的导航逻辑。Vue 的官方路由库 Vue Router 提供了丰富的功能来实现这一目标。本文将深入分析 Vue 移动端路由...
vue2移动端页面跳转过渡动画
weixin_48171199的博客
03-02 672
// In app.vue <template> <div id="app" class="Router"> <transition :name="transitionName"> <router-view></router-view> </transition> </div> </template> <script> export default { name: 'Ap
vue切换页面动画效果文件
10-16
文件分为 3个 放置文件 说明 文件 和图片 PageTransition.vue 放在文件包里 在路由里面 引入 然后其它路径 都为 改路径的子路径 ，不会引入可以看文档，或图片
HTML5实现响应式多角度全屏滑动切换特效
11-14
插件描述：HTML5实现响应式多角度全屏切换特效源码是一款基于HTML5 SVG实现的响应式全屏切换特效。演示地址：http://www.jq22.com/jquery-info10666
pc整屏滚动
09-18
h5动画，pc整屏滚动，并且每屏都有动画，动画都是通过css3的animation写的 h5动画，pc整屏滚动，并且每屏都有动画，动画都是通过css3的animation写的
vue3.x移动端页面基于vue-router的路由切换动画
qq_25674791的博客
10-21 1708
移动端页面切换一般都具有动画，我们既然要做混合开发，做完之后还是不能看起来就像一个网页，所以我们基于vue-router扩展了一个页面切换push和pop的动画。这是一篇比较硬核的帖子，作者花了不少精力来写 先上效果图 路由切换动画.gif 再贴核心代码 router文件夹下，新建transition-extend.js文件，实现如下： /** * router扩展，页面切换动画 */ // 负责SessionStorage存储路由历史。 const SessionStorage_key
vue中transition动画（移动端页面切换左右滑动效果）
A_9888的博客
02-11 7902
例子一：（简单进入和离开动画） demo1 <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" appear> <h1 v-show="!isShow" key="1">vue2！</h1> <h1 v-show="isShow"
Vue实现移动端页面切换效果
明月如霜丶
03-12 3405
在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" c
vue移动端滑动切换页面_Vue实现移动端页面切换效果【推荐】
weixin_39814482的博客
12-19 1421
在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。代码：Document* { padding: 0; margin: 0; }html, body, #app { width: 100%; height: 100%; }.one { height: 100%; background-col...
vue+实现（移动端、PC端）滑动切换页面（swiper）
仄言的博客
05-16 9899
vue+Swiper实现页面滑动切换 效果图如下： 安装swiper4 npm install swiper 2.vue中引入 首先在main.js文件中引入swiper的css文件。 import "swiper/dist/css/swiper.min.css"; 然后对于swiper组件，在组件中引入，也可以全局引入，但...
vue2移动端下滑切换页面
05-26
可以使用Vue.js的第三方插件vue-touch来实现滑动切换页面的效果。具体实现步骤如下： 1. 安装vue-touch插件 ``` npm install vue-touch --save ``` 2. 引入vue-touch插件 ```javascript import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) ``` 3. 在需要实现滑动切换页面的组件中添加以下代码 ```html <div v-touch:swipeleft="swipeLeft" v-touch:swiperight="swipeRight"> <!-- 页面内容 --> </div> ``` 其中，`v-touch:swipeleft`表示向左滑动，`v-touch:swiperight`表示向右滑动。`swipeLeft`和`swipeRight`分别是两个方法，用于实现页面切换的逻辑。 4. 实现页面切换的逻辑 ```javascript methods: { swipeLeft () { // 向左滑动切换页面的逻辑 }, swipeRight () { // 向右滑动切换页面的逻辑 } } ``` 通过上述步骤，即可在Vue.js的移动端应用中实现滑动切换页面的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值