今天修改了一个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
	}
}

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐