您的位置:

uniapp页面跳转详解

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