uniapp跳转页面动画
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
·
今天修改了一个app内点击跳转画面过于生硬的问题
场景:点击切换后画面会先白一下再跳转
首先用的是uni.reLaunch()方法跳转的
methods: {
asdsa(event) {
uni.reLaunch({
url:'/跳转的路径'
})
}
}
uni.reLaunch()可以在退出登录时使用,跳转到某个页面或者异常退出时使用
但它有一个缺点,跳转页面动画不能更改,只能使用默认样式,导致无法实现想要的效果
解决:
可以使用uni.navigateTo()方法实现跳转动画的样式修改
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack
可以返回到原页面。
asdsa(event) {
uni.navigateTo({
url: '/跳转的路径'
})
}
uni.navigateTo()的参数说明
修改显示动画参数:
如何使用:
API形式使用:
uni.navigateTo({
url: '../test/test',
animationType: 'pop-in',
animationDuration: 200
});
组件形式使用:
<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>
在pages.json中配置
"style": {
"app-plus": {
"animationType": "fade-in",
"animationDuration": 300
}
}
配置完成后可明显看出显示动画效果
更多推荐
已为社区贡献5条内容
所有评论(0)