uni-app跳转页面动画

今天修改了一个app内点击跳转画面过于生硬的问题

场景：点击切换后画面会先白一下再跳转

首先用的是uni.reLaunch()方法跳转的

1.  
   methods: {
2.  
   asdsa(event) {
3.  
   uni.reLaunch({
4.  
   url:'/跳转的路径'
5.  
   })
6.  
   }
7.  
   }

uni.reLaunch()可以在退出登录时使用，跳转到某个页面或者异常退出时使用

但它有一个缺点，跳转页面动画不能更改，只能使用默认样式，导致无法实现想要的效果

解决：

可以使用uni.navigateTo()方法实现跳转动画的样式修改

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

1.  
   asdsa(event) {
2.  
   uni.navigateTo({
3.  
   url: '/跳转的路径'
4.  
   })
5.  
   }

uni.navigateTo()的参数说明

修改显示动画参数：

 如何使用：

API形式使用：

1.  
   uni.navigateTo({
2.  
   url: '../test/test',
3.  
   animationType: 'pop-in',
4.  
   animationDuration: 200
5.  
   });

组件形式使用：

1.  
   <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
2.  
   <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

在pages.json中配置

1.  
   "style": {
2.  
   "app-plus": {
3.  
   "animationType": "fade-in",
4.  
   "animationDuration": 300
5.  
   }
6.  
   }

配置完成后可明显看出显示动画效果

这篇好文章是转载于：学新通技术网