uniapp页面跳转详解

小蓝 • 2024-12-01 10:31 • 编程

一、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
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193043.html