一、uniapp页面跳转方式
uniapp页面跳转有两种方式:navigateTo和redirectTo,可以根据需求自行选择。
// navigateTo方式 uni.navigateTo({ url: '/pages/index/index', success: function(res) { console.log('跳转成功'); }, fail: function(res) { console.log('跳转失败'); } }); // redirectTo方式 uni.redirectTo({ url: '/pages/index/index', success: function(res) { console.log('跳转成功'); }, fail: function(res) { console.log('跳转失败'); } });
二、uniapp页面跳转动画
uniapp页面跳转可以设置跳转动画,提高用户交互体验。
// 设置跳转动画 uni.navigateTo({ url: '/pages/index/index', animationType: 'slide-in-left', animationDuration: 500, }); // 可选的跳转动画类型 slide-in-right:从右侧进入 slide-in-left:从左侧进入 slide-in-top:从顶部进入 slide-in-bottom:从底部进入 pop-in:弹出 fade-in:淡入
三、uniapp页面跳转传值
uniapp页面跳转可以传递参数,实现页面间的数据交互。
// 传递参数方式 uni.navigateTo({ url: '/pages/index/index?key=value', }); // 获取传递参数 onLoad: function (options) { console.log(options.key) // 输出 value }
四、uniapp页面跳转调用方法
uniapp页面跳转可以在页面的js文件中进行调用,实现页面间的跳转和传递参数。
export default { methods: { goToPage() { uni.navigateTo({ url: '/pages/index/index?key=value' }); } } }
五、uniapp页面自动跳转
uniapp页面可以设置自动跳转,实现页面间的自动跳转。
// 定时跳转方式 setTimeout(() => { uni.navigateTo({ url: '/pages/index/index', }); }, 2000);
六、uniapp跳转多级页面
uniapp页面可以跳转多级页面,实现多层级页面间的跳转。
// 跳转3级页面 uni.navigateTo({ url: '/pages/page1/page1', success: function() { uni.navigateTo({url: '/pages/page2/page2'}); } });
七、uniapp页面跳转传递参数
uniapp页面跳转可以在多级页面间传递参数,实现多层级页面间的数据交互。
// 在跳转时传递参数 uni.navigateTo({ url: '/pages/page1/page1?name=John' }); // 在接收页面获取参数 onLoad: function(options) { console.log(options.name) // 输出 John }
八、uniapp页面跳转变量传递
uniapp页面跳转可以通过变量传递参数,提高代码的可维护性和可读性。
// 定义变量传递参数 let name = 'John'; uni.navigateTo({ url: '/pages/page1/page1?name=' + name }); // 在接收页面获取参数 onLoad: function(options) { console.log(options.name) // 输出 John }