uniapp跳转页面动画

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

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

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

methods: {
      asdsa(event) {
        uni.reLaunch({
          url:'/跳转的路径'
        })
      }
    }

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

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

解决:

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

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

asdsa(event) {
	uni.navigateTo({
	    url: '/跳转的路径'
	})
}

uni.navigateTo()的参数说明

uniapp跳转页面动画_第1张图片

修改显示动画参数:

uniapp跳转页面动画_第2张图片

 

 如何使用:

API形式使用:

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

组件形式使用:

navigator
navigator

在pages.json中配置

"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}

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

你可能感兴趣的:(笔记,1024程序员节)