Vue.js Uniapp 页面跳转、提示框的使用

之前认为uniapp是基于vuejs的,跳转得用vue router。但是目前只开放小程序,就想着用小程序的<navigator>标签和wx.navigateTo(uniapp编译会报错,但是小程序能运行),才发现uniapp有集成这些方法。而且在组件里看到了popup组件,就自己写的toast和showModal,才发现在交互反馈 里有弹框(因为之前搜索页面都是搜弹框,所以一直没找到)

uni.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

1
2
3
4
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});

通过option获取url的参数

1
2
3
4
5
6
7
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}

标签

1
<navigator :url="'/pages/test/test?item='+ id"></navigator>

uni.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

1
2
3
uni.redirectTo({
url: 'test?id=1'
});

uni.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

1
2
3
uni.reLaunch({
url: 'test?id=1'
});

通过option获取url的参数

1
2
3
4
5
export default {
onLoad: function (option) {
console.log(option.id);
}
}

uni.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

1
2
3
uni.switchTab({
url: '/pages/index/index'
});


uni.showToast(OBJECT)

显示消息提示框。

1
2
3
4
uni.showToast({
title: '标题',
duration: 2000
});

uni.hideToast()

隐藏消息提示框。

1
uni.hideToast();

uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

1
2
3
uni.showLoading({
title: '加载中'
});

uni.showModal(OBJECT)

显示模态弹窗,类似于标准 html 的消息框:alert、confirm。

1
2
3
4
5
6
7
8
9
10
11
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});

Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker


Vue.js Uniapp 页面跳转、提示框的使用

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧